大家好，很高兴又见面了，我是" 高级前端‬进阶 ‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

只盯着Docx？这几款Word深度处理开源库很热门！

今天给大家带来的主题是几款热门的前端 Word 文件处理开源库，希望大家能够用得上。话不多说，直接进入正题！

1.Docx

1.1 什么是 Docx

Docx 是一个开源 JavaScript API，提供了在 JavaScript 应用程序中轻松生成和管理 Word DOCX 文件的功能。该库支持在 Node.js 和浏览器环境中正常工作，同时非常稳定且易于使用。只需几行代码，开发人员就可以创建和操作 Word 文档，而无需任何外部依赖。

只盯着Docx？这几款Word深度处理开源库很热门！

Docx API 支持与处理 Word 文档相关的几个重要功能，例如：创建 Word 文档、修改 DOCX 文件、向 Word 文件添加段落、添加和管理页眉和页脚、插入和编辑表格、项目符号和编号支持，目录创建，设置文档边距，设置页面大小，文本对齐，管理字体和字体大小，文档部分创建等等。

Docx 的典型特征包括：

采用简单的声明式 API
80 多个使用示例
久经考验且非常成熟，测试覆盖率 99.9%+
支持纯 HTML/JS、Angular、React、Vue.js 等框架集成

目前 Docx 在 Github 上通过 MIT 协议开源，有超过 3.3k 的 star、0.4k 的 fork、2.8k 的项目依赖量、NPM 周平均*载下**量 83k、代码贡献者 80+，是一个值得关注的优质前端开源项目。

1.2 Docx 简单使用

import * as fs from "fs";
import { Document, Packer, Paragraph, TextRun } from "docx";
// 文档包含节，每个文档可以有多个节
// 这个简单的例子只包含一个部分
const doc = new Document({
  sections: [
    {
      properties: {},
      children: [
        new Paragraph({
          children: [
            new TextRun("Hello World"),
            new TextRun({
              text: "Foo Bar",
              bold: true,
            }),
            new TextRun({
              text: "\tGithub is the best",
              bold: true,
            }),
          ],
        }),
      ],
    },
  ],
});
// 用于将文件导出为 .docx 文件
Packer.toBuffer(doc).then((buffer) => {
  fs.writeFileSync("My Document.docx", buffer);
});
//名为“My Document.docx”的文件将位于文件系统中。

2.docxtemplater

2.1 什么是 docxtemplater

docxtemplater 是一个从模板（Word、Powerpoint 和 Excel 文档）、Node.js、浏览器和命令行/演示生成 docx、pptx 和 xlsx 的工具库。它可以用数据替换{占位符}，还支持循环和条件，非程序员（例如：客户）可以编辑模板。

只盯着Docx？这几款Word深度处理开源库很热门！

docxtemplater 非常强大，因为多年来修复了许多问题，并且测试和代码质量很高。开发者还可以通过以下付费模块逐步增强自身功能：

图像模块：添加给定图像，语法为：{%image}；
Html 模块：使用语法 {~html} 在 docx 文档中插入格式化文本；
XLSX 模块：能够对 Excel 文件（xlsx 扩展名）进行模板化，还可以使用循环和条件；
图表模块：通过语法 {$chart} 提供的 JSON 对象中的数据来替换图表；
Html-Pptx 模块：使用语法 {~html} 在 pptx 文档中插入格式化文本；
错误定位模块：使用 Word 注释显示模板中的错误
幻灯片模块：使用语法 {:user} 动态创建多个幻灯片；
子模板模块：用于在给定的 docx 文件中包含外部 docx 文件，语法为 {:include doc}；
小节模块：包含来自其他文档的小节（页眉/页脚），语法为 {:subsection doc}；
Subtemplate-pptx 模块：用于在给定的 pptx 文件中包含外部 pptx 文件，语法为 {:include doc}；
Word-Run 模块：使用语法 {r@wrun} 在文档中包含原始运行 (<w:r>)。这使得可以包含样式文本，而无需像 {@rawXml} 标记中那样删除封闭的段落；
其他模块：支持 QrCode、表模块、元模块、样式模块、脚注模块、段落占位符模块等等

目前 docxtemplater 在 Github 上通过 MIT 协议开源，有超过 2.5k 的 star、0.33k 的 fork、3k 的项目依赖量、NPM 周平均*载下**量 60k+、代码贡献者 30+，是一个值得关注的优质前端开源项目。

2.2 使用 docxtemplater

下面代码是在 Node.js 环境中使用 docxtemplater：

const PizZip = require("pizzip");
const Docxtemplater = require("docxtemplater");
const fs = require("fs");
const path = require("path");
// 二进制文件读取docx文件
const content = fs.readFileSync(
  path.resolve(__dirname, "input.docx"),
  "binary"
);
const zip = new PizZip(content);
const doc = new Docxtemplater(zip, {
  paragraphLoop: true,
  linebreaks: true,
});
// 渲染文档（将 {first_name} 替换为 John，将 {last_name} 替换为 Doe）
doc.render({
  first_name: "John",
  last_name: "Doe",
  phone: "0652455478",
  description: "New Website",
});

const buf = doc.getZip().generate({
  type: "nodebuffer",
  // 压缩：DEFLATE 添加压缩步骤。
  // 对于 50MB 的输出文档，预计需要 500ms 的额外 CPU 时间
  compression: "DEFLATE",
});
// buf 是一个nodejs Buffer，你可以将它写入
// 文件或重新发送，例如使用res.send
fs.writeFileSync(path.resolve(__dirname, "output.docx"), buf);

运行此代码后，会在同一文件夹中获得一个名为“output.docx”的文件，其中 {first_name} 替换为“John”，{last_name} 标记替换为“Doe”。

在浏览器环境中使用，与 React、Angular 、Vue、Next.js 的集成示例可以参考文末的资料，这里不再过多展开。

3.Docx-templates

3.1 什么是 Docx-templates

在 Node.js 和浏览器环境创建基于模板的 docx 报告。

只盯着Docx？这几款Word深度处理开源库很热门！

Docx-templates 具有以下特点：

使用 Word 自然编写文档，只需在动态内容需要的地方添加一些命令
使用开发者想要的任何查询语言（例如，在 GraphQL 中）在模板本身（QUERY 命令）中表达数据需求（查询，类似于 Relay way：在 Relay 中，数据需求与需要数据的 React 组件一起声明
支持执行 JavaScript 片段（EXEC 命令，简称 !）
在文档中插入 JavaScript 片段的结果（INS、=等）
动态嵌入图像、超链接甚至 HTML（IMAGE、LINK、HTML）。动态图像非常适合动态二维码、将照片直接*载下**到报告、图表、甚至地图
使用 FOR/END-FOR 命令添加循环，支持表行、嵌套循环和元素
JavaScript 处理（过滤、排序等）
有条件地包含内容，如果某个 JavaScript 表达式为真
为某些命令定义自定义别名 (ALIAS)，这对于编写表模板很有用
在单独的 Node VM 或用户提供的沙箱中运行所有 JavaScript。
包括文字 XML，同时用 TypeScript 编写，因此附带类型定义。
此存储库中有大量示例（使用 Node、Webpack 和 Browserify）
除了常规 .docx 文件之外，还支持 .docm 模板。

目前 Docx-templates 在 Github 上通过 MIT 协议开源，有 0.7k 的 star、是一个值得关注的前端开源项目。

3.2 使用 Docx-templates

下面是一个简单的示例，报告数据直接作为对象注入：

import createReport from "docx-templates";
import fs from "fs";
const template = fs.readFileSync("myTemplate.docx");
const buffer = await createReport({
  template,
  data: {
    name: "John",
    surname: "Appleseed",
  },
});

fs.writeFileSync("report.docx", buffer);

开发者还可以在 Deno 中使用 docx 模板。只需按照浏览器指南并导入 polyfilled docx-templates 包，例如从 unpkg 导入：

// @deno-types="https://unpkg.com/docx-templates/lib/bundled.d.ts"
import { createReport } from "https://unpkg.com/docx-templates/lib/browser.js";

需要注意的是，开发者必须设置 noSandbox: true 或使用 runJs 选项自带沙箱。除了 Deno 环境外，Docx-templates 还支持在浏览器环境中使用，本文不再过多展开，可以在文末参考资料中自行阅读。

4.其他公共库

4.1 docxjs

docxjs 是一个 Docx 渲染库，用于将 DOCX 渲染为 HTML，目前在 Github 上通过 Apache-2.0 协议开源，是一个值得关注的前端开源项目。

docxjs 的使用非常简单，比如下面是在浏览器中运行 docxjs 的示例：

<!--optional polyfill for promise-->
<script src="https://unpkg.com/promise-polyfill/dist/polyfill.min.js"></script>
<!--lib uses jszip-->
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="docx-preview.min.js"></script>
<script>
    var docData = <document Blob>;
    docx.renderAsync(docData, document.getElementById("container"))
        .then(x => console.log("docx: finished"));
</script>
<body>
    ...
    <div id="container"></div>
    ...
</body>

4.2 docx4js

docx4js 是一个 javascript 的 docx/pptx/xlsx 文件的解析器，但是不幸的是目前还只支持 docx。

为了性能，docx4js 的实现不保留解析的结构，只是遍历 docx 内容，并识别 docx 模型，然后一一调用 visitors。无论内容、风格，都具有相同的策略，这种方法可以用更少的内存做更多的事情。

docx 中有很多信息，但客户端应用程序通常只关心其中的一部分，例如：仅内容、仅结构、某些样式或某些属性。客户端应用程序能够按类型处理特殊的单词模型。

使用 docx4js 也非常简单，比如下面的例子：

import docx4js from "docx4js"

docx4js.load("~/test.docx").then(docx=>{
	// 可以通过给出一个函数将 docx 渲染到任何东西（反应元素、树、dom 等）
	docx.render(function createElement(type,props,children{
		return {type,props,children}
	})
	//或使用事件处理程序进行更灵活的控制
	const ModelHandler=require("docx4js/lib/openxml/docx/model-handler").default
	class MyModelhandler extends ModelHandler{
		onp({type,children,node,...}, node, officeDocument){

		}
	}

	const handler=new MyModelhandler()
	handler.on("*",function({type,children,node,...}, node, officeDocument){
		console.log("found model:"+type)
	})
	handler.on("r",function({type,children,node,...}, node, officeDocument){
		console.log("found a run")
	})
	docx.parse(handler)

	// 可以更改 docx.officeDocument.content 上的内容，然后保存
	docx.officeDocument.content("w\\:t").text("hello")
	docx.save("~/changed.docx")
})

// 可以创建一个空白的 docx
docx4js.create().then(docx=>{
	//做任何你想做的事
	docx.save("~/new.docx")
})

5.本文总结

本文主要和大家介绍几款热门的前端 Word 文件处理开源库，希望大家能够用得上。相信通过本文的阅读，大家对 docx4js、docxjs、Docx-templates、docxtemplater、Docx等会有一个初步的了解。

因为篇幅有限，关于 docx4js、docxjs、Docx-templates、docxtemplater、Docx这些库的更多用法和特性文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏，您的支持是我不断创作的动力。

参考资料

https://github.com/dolanmiu/docx

https://products.fileformat.com/word-processing/javascript/docx/

https://medium.com/geekculture/create-dynamic-word-documents-using-docx-js-file-saver-and-data-from-an-excel-or-json-dbd5e4ec823f

https://github.com/open-xml-templating/docxtemplater

https://github.com/guigrpa/docx-templates

https://github.com/VolodymyrBaydalka/docxjs

https://github.com/lalalic/docx4js

只盯着 Docx？这几款 Word 深度处理开源库很热门！

1.Docx

1.1 什么是 Docx

1.2 Docx 简单使用

2.docxtemplater

2.1 什么是 docxtemplater

2.2 使用 docxtemplater

3.Docx-templates

3.1 什么是 Docx-templates

3.2 使用 Docx-templates

4.其他公共库

4.1 docxjs

4.2 docx4js

5.本文总结

参考资料