js导出word

使用场景

前端拿到服务端数据生成 word 、excel 、pdf ,并导出或预览，此处为导出word 参考地址

导出所需的依赖库

1. docxtemplater
   docxtemplater 是一种邮件合并工具，以编程方式使用并处理条件、循环，并且可以扩展以插入任何内容（表格、html、图像）。

• npm 是安装 docxtemplater 最简单的方法

npm install docxtemplater pizzip --save

• js引入 JS 文件

2. jszip-utils
   使用 AJAX 调用在提供文件的服务器上获取文件 (HTTP GET)。如果浏览器支持跨域请求，则它们将起作用

• 使用 npm

npm install jszip-utils --save 

• js引入 js文件

3.jszip
JSZip 是一个用于创建、读取和编辑 .zip 文件的 javascript 库，具有可爱而简单的 API。

• 使用 npm

npm install jszip --save

• js引入 js文件

4.FileSaver
它可以利用新流的强大功能将数据异步直接保存到硬盘驱动器应用程序接口。这将支持进度、取消和知道何时完成写作
FileSaver.js 是在客户端保存文件的解决方案，非常适合在客户端生成文件的 Web 应用程序
saveAs()

• 使用 npm

npm install file-saver --save

• js引入 js文件

页面引入

import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'

制作doc模板 并绑定数据

// 表单对象
form: {
          custName: "AA", // 客户姓名
          phoneNumber: "1382324234", // 联系方式
          projectRequirement: "~", // 项目要求
          totalPrice: 123400, // 合计报价
          remark: "~~", // 备注
          checkReason: '同意' // 审核备注
 },
// 表格信息
tableData: [
                {
                    number: 2, // 序号
                    name: "设备2", // 设备名称
                    num: 2, // 数量
                    salePrice: 20, // 销售单价
                    saleTotal: 40, // 销售合计
                    remark: "啦啦啦" // 备注
                 }
]

      exportWord: function() {
        let _this = this;
        // 读取并获得模板文件的二进制内容
        let docxsrc = "../../static/input.docx"; //模板文件的位置 "input.docx"
        JSZipUtils.getBinaryContent(docxsrc, function(error, content) {
          // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
          // 抛出异常
          if (error) {
            throw error;
          }
          
          // 创建一个JSZip实例，内容为模板的内容
          let zip = new PizZip(content);//PizZip  JSZip
          // 创建并加载docxtemplater实例对象
          let doc = new docxtemplater().loadZip(zip);
          // 设置模板变量的值
          doc.setData({
            ..._this.form,//表头信息
            table: _this.tableData//为循环的表格
          });
          
          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");
        });
      },

doc模板

地址)