vue实现word模板在线预览本地文件

要实现Vue中的Word模板在线预览本地文件，可以借助于第三方库`docxtemplater`和`jszip`。具体步骤如下：

1. 安装`docxtemplater`和`jszip`库：

npm install docxtemplater jszip --save

2. 在Vue组件中引入这两个库：

import Docxtemplater from 'docxtemplater';
import JSZip from 'jszip';

3. 在Vue组件中添加一个文件上传的input框和一个用于显示Word文档内容的div：

<template>
  <div>
    <input type="file" ref="fileInput" @change="onFileChange">
    <div ref="wordContent"></div>
  </div>
</template>

4. 在Vue组件的methods中编写处理文件上传和Word模板预览的方法：

methods: {
  onFileChange() {
    const file = this.$refs.fileInput.files[0];
    const reader = new FileReader();
    reader.onload = () => {
      this.previewWord(reader.result);
    };
    reader.readAsArrayBuffer(file);
  },
  previewWord(data) {
    JSZip.loadAsync(data).then((zip) => {
      const doc = new Docxtemplater().loadZip(zip);
      const result = doc.getZip().generate({type: 'blob'});
      const wordContent = this.$refs.wordContent;
      wordContent.innerHTML = '';
      const fileReader = new FileReader();
      fileReader.onloadend = () => {
        const content = fileReader.result;
        const iframe = document.createElement('iframe');
        iframe.src = `data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,${btoa(content)}`;
        iframe.width = '100%';
        iframe.height = '800px';
        wordContent.appendChild(iframe);
      };
      fileReader.readAsBinaryString(result);
    });
  },
}

这段代码的作用是：

- 当用户选择文件后，将文件读取为二进制数组，并调用`previewWord`方法进行预览。
- 在`previewWord`方法中，使用`JSZip`将Word文档的二进制数组解压缩，然后使用`docxtemplater`加载Word文档模板。
- 调用`docxtemplater`的`getZip()`方法生成Word文档，并将其转换为二进制字符串。
- 将二进制字符串转换为base64编码，生成一个iframe元素，并将其作为子元素添加到Vue组件中用于显示Word内容的div中。

这样，当用户上传一个Word文档后，就可以在Vue组件中预览该文档。