前端根据word模板导出数据

概述

本文大致讲述怎么将数据根据固定word模板导出为word文件

所需js库

docxtemplater-github.com/open-xml-te…

pizzip-github.com/open-xml-te…

JSZipUtils-github.com/Stuk/jszip-…

file-saver-github.com/eligrey/Fil…

准备

1. 准备一份word模板，里面需要填充数据的地方用{数据中所对应的变量名}来替换，这个文件可以放项目中也可以放在访问不跨域的方法

2. 在项目中安装上边所需要的js库

示例代码

// 公用函数
// filePath 可以是项目里面地址  也可以是一个不跨域的地址
const exportWord = (data, filePath) => {
  // 读取并获得模板文件的二进制内容
  JSZipUtils.getBinaryContent(filePath, (error, content) => {
    if (error) {
      throw error;
    }
    // 创建一个PizZip实例，内容为模板的内容
    let zip = new PizZip(content);
    // 创建并加载docxtemplater实例对象
    let doc = new docxtemplater().loadZip(zip);
    doc.setData({
      ...data,
    });
    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`);
  });
};



// 调用
<button
      onClick={() => {
        exportWord(
        // 这里的数据的key要和模板中对应起来
          {
            name: "小明",
            sex: "男",
            hobby: "打游戏",
            age: 18,
          },
          // 文件的地址
          "/demo.docx"
        );
      }}
    >
      导出
    </button>