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>

　　

3. 第三种，适用微软免费接口（最高保真的方式）

 http://view.officeapps.live.com/op/view.aspx?src=你外网可访问的word文件链接

（内网如果想实现，需要搭建两台window服务器，来运行服务）

4. 其他思路

后端将word转pdf,前端直接渲染pdf   (存在格式问题)

后端word转图片，因为也是先将word转pdf,pdf再生成图片，所以还是会有问题（格式问题）

花钱使用第三方的服务接口（外网，费钱）