word在线预览1.直接预览-格式问题（效果差）2.使用微软接口或第三方收费接口（必须是外网，可访问链接）

1. 先介绍第一种方案（纯前端）

npm install 以下依赖 --save

"@vue-office/docx": "^1.3.0",

"@vue/composition-api": "^1.3.0",

"vue-demi": "^0.14.5",

<template>
  <div class="app-container">
    <div class="select-file">
      <input id="input" type="file" />
    </div>
    <div class="file-preview">
      <VueOfficeDocx v-if="src" style="height: 600px" :src="src" />
      <!-- <VueOfficeExcel v-if="src" style="height: 600px;" :src="src" /> -->
      <!-- <VueOfficePdf v-if="src" style="height: 600px" :src="src" /> -->
    </div>
  </div>
</template>
 
<script>
// docx文档引入、注册
import VueOfficeDocx from "@vue-office/docx";
import "@vue-office/docx/lib/index.css";
export default {
  components: { VueOfficeDocx },
  filters: {},
  data() {
    return {
      src: "",
    };
  },
  created() {},
  mounted() {
    this.addInputEventListener();
  },
  methods: {
    addInputEventListener() {
      var _self = this;
      const input = document.querySelector("#input");
      input.addEventListener("input", (e) => {
        const fileBlob = e.target.files[0];
 
        // 第一种方式（通过window.URL.createObjectURL将Blob文件流转为一个路径）
        // this.src = window.URL.createObjectURL(new Blob([fileBlob]));
 
        // 第二种方式（转为base64编码）
        const fileReader = new FileReader();
        fileReader.readAsDataURL(fileBlob);
        fileReader.onload = (e) => {
          this.src = e.target.result;
        };
 
        // 第三种方式（获取到buffer）
        // fileBlob.arrayBuffer().then((buffer) => {
        //   this.src = buffer;
        // });
      });
    },
  },
};
</script>

　　2.第二种

引入依赖

"docx-preview": "^0.1.18",

"jszip": "^3.10.1",

<template>
  <div class="app-container">
    <div class="select-file">
      <input id="input" type="file" />
    </div>
    <!-- 预览文件的地方（用于渲染） -->
    <div ref="fileDom"></div>
  </div>
</template>
 
<script>
// docx文档引入、注册
import VueOfficeDocx from "@vue-office/docx";
import "@vue-office/docx/lib/index.css";
// 引入docx-preview插件
let docx = require("docx-preview");
window.JSZip = require("jszip");
export default {
  components: { VueOfficeDocx },
  filters: {},
  data() {
    return {
      src: "",
    };
  },
  created() {},
  mounted() {
    this.addInputEventListener();
  },
  methods: {
    addInputEventListener() {
      var _self = this;
      const input = document.querySelector("#input");
      input.addEventListener("input", (e) => {
        const fileBlob = e.target.files[0];
 
 
        docx.renderAsync(new Blob([fileBlob]), _self.$refs.fileDom); // 渲染到页面
      });
    },
  },
};
</script>