纯前端vue项目导实现JSON数据导出为word(.docx)格式

源代码

// exportWordFile.js
import DocxTemplater from 'docxtemplater'; // "^3.31.2",
import PizZip from 'pizzip'; // "^3.1.1",
import JsZipUtils from 'jszip-utils'; // "^0.1.0",
import { saveAs } from 'file-saver'; // "^2.0.5",

/**
 * @param word_path - 模板保存的位置
 * @param data - 需要导出的数据
 * @param exportFileName - 导出的文件的名称
 */
export function exportWordFile(word_path, data, exportFileName) {
  // 读取并获得模板文件的二进制内容
  JsZipUtils.getBinaryContent(word_path, (error, content) => {
    // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
    // 抛出异常
    if (error) {
      throw error;
    }

    // 创建一个JSZip实例，内容为模板的内容
    const zip = new PizZip(content);
    // 创建并加载docxtemplater实例对象
    const doc = new DocxTemplater().loadZip(zip);

    // 设置模板变量的值
    doc.setData(data);

    try {
      // 用模板变量的值替换所有模板变量
      doc.render();
    } catch (error) {
      // 抛出异常
      const e = {
        message: error.message,
        name: error.name,
        stack: error.stack,
        properties: error.properties
      };
      console.log(JSON.stringify({ error: e }));
      throw error;
    }

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

模板数据

{
  "id":"4260f7ec73d39e9ed9db15342e4c58bd",
  "alarmName":"数据测试12312",
  "eventDomain":"出租汽车",
  "siteType":"国省干道",
  "eventType":"港口航运企业安全事故",
  "eventTime":"2022-08-27 12:47:02",
  "addrInfo":"阿萨达说",
  "formZhuangBeiList":[
    {
      "materialName":"1231",
      "materialNum":"12",
      "materialType":"01",
      "materialId":"8a4fa949d691ee23f1c7da2db3607688",
      "deptLeader":"刘老三",
      "localAdr":"酒埠江B05县道南50米",
      "materialWarehouseName":"B-攸县交通事务中心（酒埠江）",
      "telphone":"13874164777",
      "orderNum":0
    },
    {
      "materialName":"qsdadasd",
      "materialNum":"123",
      "materialType":"01",
      "materialId":"56ca7875458c68fcb1bb42f50ce78fb9",
      "deptLeader":"刘老三",
      "localAdr":"酒埠江B05县道南50米",
      "materialWarehouseName":"B-攸县交通事务中心（酒埠江）",
      "telphone":"13874164777",
      "orderNum":0
    },
    {
      "materialName":"213",
      "materialNum":"123123333",
      "materialType":"01",
      "materialId":"d0abc6ad176ce0c3f33b93deeccd0d0e",
      "deptLeader":"XXX",
      "localAdr":"XXX地址",
      "materialWarehouseName":"XX装备资源库",
      "telphone":"13800000000",
      "orderNum":0
    }],
    "formWuZiList":[]
}

实际导出的数据多余模板中的数据也无妨，缺少的话 实际导出的模板会显示undefined

word模板定义

导出结果