vue导出word文档

使用word模板做导出数据

1、安装使用的插件

npm i jszip@^2.6.1

npm i file-saver@^2.0.2

npm i docxtemplater@^3.17.6

npm i jszip-utils@^0.1.0

2、在需要用到模板的页面引入插件

  import XLSX from "xlsx";
  import JSZipUtils from "jszip-utils"
  import docxtemplater from "docxtemplater"
  import {saveAs} from 'file-saver'
  import JSZip from 'jszip'

3、自己写好word文档的模板样式

（1）、填写其对应的字段到word模板内

4、点击导出的方法 js部分

 ExportWord() {
        let _this = this;
         // 读取并获得模板文件的二进制内容
          JSZipUtils.getBinaryContent("index.docx", function (error, content) {
            // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
            // 抛出异常
            if (error) {
              throw error;
            }
            // 创建一个JSZip实例，内容为模板的内容      
            let zip = new JSZip(content);
            // 创建并加载docxtemplater实例对象
            let doc = new docxtemplater().loadZip(zip);
            // 设置模板变量的值
            doc.setData({
              ..._this.form, //这里是上面form表单的内容
            });
            try {
              // 用模板变量的值替换所有模板变量
              doc.render();
            } catch (error) {
              // 抛出异常
              let e = {
                message: error.message,
                name: error.name,
                stack: error.stack,
                properties: error.properties
              };
              console.log(JSON.stringify({
                error: e
              }));
              throw error;
            }

            // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
            let out = doc.getZip().generate({
              type: "blob",
              mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
            });
            // 将目标文件对象保存为目标类型的文件，并命名
            saveAs(out, "报告文档.docx");
          });
      },

5、html部分

 <button type="button" style="background:#028093;color:#fff;margin-left:10px"
  class="btn" @click="ExportWord">导出报表</button>
 </div>

6、效果图