vue 预览 word

vue 预览 word

注意：vue-cli3+ 在项目本地预览时，在public 文件夹下放文件。
vue-cli2 在新建static文件夹

1.引入插件

npm install mammoth

2.导入插件

import mammoth from 'mammoth'

3.核心代码

<!--  -->
<template>
  <div class=''>
    <van-nav-bar title="预览doc"
                 left-text="返回"
                 left-arrow
                 class="title"
                 @click-left="onClickLeft"
                 fixed
                 :placeholder="isFixedHeight"
    />
    <div class="word-wrap">
      <div id="wordView" v-html="wordText"/>
    </div>

  </div>
</template>

<script>
import mammoth from 'mammoth'

export default {
  name: 'Word',
  data() {
    return {
      isFixedHeight: true,
      wordURL: 'https://xx.docx',
      // url: '@/assets/document/word文档测试.docx',
      // url: process.env.VUE_APP_BASE_API + '/uploadPath/files/cs.docx',
      // url: process.env.VUE_APP_BASE_API + '/uploadPath/files/cs.docx',
      // url: '../../static/file/cs.docx',
      wordText: "",
      // wordURL: '../../static/file/cs.docx'//文件地址
      // wordURL: '../../../cs.docx',//文件地址
      // wordURL: process.env.VUE_APP_BASE_API + '/uploadPath/files/cs.docx',
    }
  },
  methods: {
    //返回键
    onClickLeft() {
      this.$router.go(-1)
    },

    getWordText() {
      const xhr = new XMLHttpRequest();
      xhr.open("get", this.wordURL, true);
      xhr.responseType = "arraybuffer";
      xhr.onload = () => {
        if (xhr.status == 200) {
          mammoth.convertToHtml({arrayBuffer: new Uint8Array(xhr.response)}).then((resultObject) => {
            this.$nextTick(() => {
              this.wordText = resultObject.value;
            });
          });
        }
      };
      xhr.send();

    },


  },

  created() {
    this.getWordText();
  }

}
</script>
<style scoped >

.word-wrap {
  padding: 15px;

  /*img {*/
  /*  width: 100%;*/
  /*}*/
}

</style>