前端生成word文档

核心工具：docxtemplater：一个可以通过js生成word，excel和ppt的工具，工具分三个版本，其中使用了免费版本

其他依赖：PizZip， JSZipUtils

 

安装：

 　　yarn add docxtemplater pizzip jszip-utils -S 

 

　　如果需要支持image，需要安装image模块

 　　yarn add docxtemplater-image-module-free -S 

　　如果需要将文件保存在本地可以使用file-saver

　　 yarn add file-saver -S 

 

使用：

　　如果需要使用Image和save（最后一行），将注释打开就行

import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
// import ImageModule from "docxtemplater-image-module-free";
// import { saveAs } from "file-saver";

export default function exportWordAndImage(report) {
  const templateChose = "./template.docx"; // 模板推荐放在public文件夹下
  JSZipUtils.getBinaryContent(templateChose, (error, content) => {
    if (error) {
      console.error(error);
      return;
    }
    // const opts = {};
    // opts.centered = false;
    // opts.getImage = (tagValue) => new Promise((resolve, reject) => {
    //   JSZipUtils.getBinaryContent(tagValue, (geterror, getcontent) => {
    //     if (geterror) {
    //       return reject(geterror);
    //     }
    //     return resolve(getcontent);
    //   });
    // });
    // 图片有关代码，没有图片的可以删除
    // opts.getSize = (img, tagValue, tagName) => {
    // return [200, 200] // 图片大小 （固定的）如果你的图片大小要固定，请使用这行代码，将下面return new Promise的那部分注销掉
    // 非固定（这里是设置宽度最大为300px的图片）
    //   const wid = 300;
    //   return new Promise((resolve, reject) => {
    //     const image = new Image();
    //     image.src = tagValue;
    //     let imgWidth;
    //     let imgHeight;
    //     let scale;
    //     image.onload = () => {
    //       imgWidth = image.width;
    //       imgHeight = image.height;
    //       scale = 0;
    //       if (imgWidth > wid) {
    //         scale = wid / imgWidth;
    //         imgWidth = wid;
    //         imgHeight *= scale;
    //       }
    //       resolve([imgWidth, imgHeight]);
    //     };
    //     image.onerror = (e) => {
    //       console.log("img, tagName, tagValue : ", img, tagName, tagValue);
    //       reject(e);
    //     };
    //   });
    // };
    // const imageModule = new ImageModule(opts);

    const zip = new PizZip(content);
    const doc = new Docxtemplater()
      .loadZip(zip)
      .setOptions({ linebreaks: true }) // 换行确认，如果你有的文本中有换行符的话，可以选择它导入到word起不起作用
      // .attachModule(imageModule)
      .compile();
    doc
      .resolveData({
        // 这是你导入的数据，这个数据体中的属性或对象一定要和word模板中的插值一样
        ...report,
      })
      .then(() => {
        console.log("Export...");
        doc.render();
        const out = doc.getZip().generate({
          type: "blob",
          mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        });

        return out; // 直接返回生成的blob对象
        // 输出文档，可以自定义自己的文档名
        // saveAs(out, "Temporary, you need to sync as.docx");
      });
  });
}

 

使用的时候直接调用

exportWordAndImage() // 参数是需要替换的数据

模版语法（免费版）：

　　变量替换：{变量}

　　　　如： {name}   // 此处会使用name值进行替换

　　条件：{#users.length > 3}

　　　　　　// 当users的length大于3时渲染这里

　　　　　{/}

　　循环渲染：{#products}

　　　　　　{name}  //这里会渲染products[index].name 字段

　　　　　{/products}

　　其他：参考官网demo

 

参考：https://blog.csdn.net/Grantr/article/details/124482299