记一次前端导出word

前端导出文件一般情况都是后端返回的数据流，最近搞了一个单机版electron项目需要前端导出，用的electron-egg框架

框架项目地址：electron-egg: 一个入门简单、跨平台、企业级桌面软件开发框架。 (gitee.com)

看了一些文章实现方法推荐 ：

Vue中前端导出word文件 - 掘金 (juejin.cn)

前端使用docxtemplater导出word文档最佳实践 - 掘金 (juejin.cn) 

 word模板文件导出

该方法提供一个word模板文件，数据通过参数替换的方式传入word文件中，灵活性较差，适用于简单的文件导出。需要依赖：docxtemplater、file-saver、jszip-utils、pizzip。

模板文件如下：

模板大概这样，通过对应字段把数据插入到指定位置，导出文件如下：

注: 上述方法中的模板文件地址为你在vue项目中存放公共文件的位置，在vue2中为static文件夹下，在vue3中为public文件夹下。

实现代码如下：

import { saveAs } from "file-saver";
import JSZipUtils from "jszip-utils";
const PizZip = require("pizzip");
import docxtemplater from "docxtemplater";
import JSZip from "jszip";
const promises = [];
const zips = new JSZip();
export async function exportWord(list) {
  list.forEach((element, index) => {
    // word文件名称
    let fileName = element.name + "体检" + ".docx";
    let data = element;
    const promise = new Promise((resolver, reject) => {
      //模板地址 "/demo.docx"
      JSZipUtils.getBinaryContent("/demo.docx", (error, content) => {
        if (error) {
          throw error;
        }
        let zip = new PizZip(content);
        let doc = new docxtemplater(zip, {
          paragraphLoop: true,
          linebreaks: true,
        });
        doc.setData({
          list: data,
        });
        try {
          doc.render();
        } catch (err) {
          console.log(err);
          // throw err
        }
        let out = doc.getZip().generate({
          type: "blob",
          mimeType:
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        });
        // 添至zip集合中
        zips.file(fileName, out, { binary: true });
        resolver();
      });
    });
    promises.push(promise);
  });
  Promise.all(promises).then(() => {
    zips.generateAsync({ type: "blob" }).then((content) => {
      // 下载
      saveAs(content, "体检");
    });
  });
}

下载后的文件（一个zip包中有几个文件）仅供参考：

我用的是上述方法

由于作者太菜，原计划是：生成一个word，每个数据单独一页没实现，各位有实现的可以交流一下.