Word（docx）模板写入与下载（JS版）

原创已于 2025-09-25 15:04:42 修改 · 281 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#word #前端 #javascript

于 2025-09-25 11:10:09 首次发布

在工作中可能会遇到下载word文件，大多数情况下，我们都是让后端进行文件写入的

这里我们让前端来处理模板写入数据，并下载。

---------------------------------------------------------------------------------------------------------------------------------

1、安装必要依赖

npm i docxtemplater -D
npm i pizzip -D
npm i jszip-utils -S
npm i file-saver -S

2、编辑docx模板

模板建议放在public文件夹目录下

①、我们写了两个字段title与subTitle并用英文花括号{}包裹起来，花括号{}是索引逻辑，识别到{}会对数据进行替换。如果存在嵌套对象，我得建议是提出来，扁平化处理。

②、需要遍历数组时，同样用花括号{}包裹，以#号开头，/号结尾，表示一个循环体结束。如果存在嵌套数组，也是一样的道理，可不进行扁平化处理。存在合并表头不要担心，其值只与列相关，正常插入字段就行。

数据结构会在3中给出

所以模板中，应避免填写无关的索引逻辑，只有在需要填入数据时才用花括号{}包裹起来

3、数据结构

最理想的数据结构，嵌套对象进行扁平化处理，嵌套数组可不处理

4、导出方法

import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";
const exportDocx = (tempDocxPath, data, fileName) => {
  // 读取并获得模板文件的二进制内容
  JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {
    if (error) {
      throw error;
    }
    const zip = new PizZip(content);
    const doc = new Docxtemplater().loadZip(zip);
    doc.setData(data);
    try {
      doc.render();
    } catch (error) {
      console.log(error);
      throw error;
    }
    const out = doc.getZip().generate({
      type: "blob",
      mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
    }); 
    saveAs(out, fileName);
  });
};

5、导出和导出结果

三个参数：

①、docx模板文件路径，一般放在public目录下

②、数据结构，如3

③、导出文件名

exportDocx("/static/dailyreport.docx", params, `导出.docx`);