试试 docx.js 一键生成 Word 文档,效果很不错

前端经常有需求,希望把合同、报告等内容导出内容为 Word 文档的 .docx 文件,挺常见的,之前踩过坑。

以前很多情况是在服务端去生成好文档,前端下载,最近发现一个叫 docx.js 的开源项目,它很简单:让程序员用写代码的方式,高效地生成 Word 文档。

项目介绍

docx 是一个 TypeScript/JavaScript 库,用于以编程方式生成 Word 文档(.docx 文件)。它提供了一个声明式 API,可以在 Node.js 和浏览器环境中无缝工作

官方网址:https://docx.js.org/

Github 仓库:https://github.com/dolanmiu/docx

它解决了什么?

简单来说,它让开发者可以在前端或者服务端,直接使用 TypeScript/JavaScript 将内容生成一份 Word 文档导出,使用简单,效果又好。

它支持:

  • 声明式 API:你不需要理解 Word 底层那些复杂的 XML 结构,只需要告诉它"我要一个标题、一段正文、一个表格",它就能帮你生成完整的 .docx 文件。
  • 一份代码,多端运行:支持在 Node.js 后端、前端浏览器或部署到 Serverless 环境使用。
  • 零外部依赖:这个库不依赖任何第三方运行时,打出来的包很干净,不用担心引入奇怪的冲突问题。
  • 功能齐全:标题、段落、加粗斜体、图片、表格、项目符号、页眉页脚、页码、目录、脚注尾注,甚至水印和修订模式,这些办公场景常见的需求都覆盖到了。

还有就是项目用了TypeScript开发,提供了完整的类型提示,写代码时 IDE 能给你智能提示,减少出错的概率。

快速上手

作为一个成熟的开源项目,docx.js 的上手体验做得很顺滑。

安装只需要一行命令:

go 复制代码
npm install --save docx

创建一个简单的文档只需要几行代码:

go 复制代码
import { Document, Packer, Paragraph, TextRun } from "docx";
import * as fs from "fs";

const doc = new Document({
sections: [
    {
children: [
new Paragraph({
children: [new TextRun("Hello World!")],
        }),
      ],
    },
  ],
});

Packer.toBuffer(doc).then((buffer) => {
  fs.writeFileSync("My Document.docx", buffer);
});

它的官方文档还提供了一个交互式的 Playground,让你可以直接在网页上写代码、实时预览效果,省去了反复安装调试的麻烦。

Playground 地址:https://docxjs-editor.vercel.app/playground/

示例演示

项目同时支持 Node 和浏览器环境,官方也提供了 React、Vue、Angular 等主流框架的使用示例:

1.浏览器端示例

  • 浏览器环境中使用基本 HTML/JS 示例

https://codepen.io/dolanmiu/pen/RwNeObg

https://jsfiddle.net/dolanmiu/onadx1gu/

  • React 使用示例

https://stackblitz.com/edit/react-docx

https://stackblitz.com/edit/react-docx-images (向 Word 文档添加图片)

  • Vue.js 使用示例

以下是 docx 在 Vue.js 中的应用示例:

https://stackblitz.com/edit/vuejs-docx^\[8\]^

2.Node.js 示例

https://runkit.com/dolanmiu/docx-demo1 - 简单的段落和文本

https://runkit.com/dolanmiu/docx-demo2 - 高级段落和文本

https://runkit.com/dolanmiu/docx-demo3 - 要点

https://runkit.com/dolanmiu/docx-demo4 - 简单表格

https://runkit.com/dolanmiu/docx-demo5 - 图片

https://runkit.com/dolanmiu/docx-demo6 - 边距

https://runkit.com/dolanmiu/docx-demo7 - 风景

https://runkit.com/dolanmiu/docx-demo8 - 页眉和页脚

https://runkit.com/dolanmiu/docx-demo10 - 我的简历是用 docx 生成的

生态与社区

这个项目在 GitHub 上已经收获了超过 5600 颗星,被 13000 多个项目使用,133 位开发者参与过贡献,版本迭代也非常活跃,最近一次更新就在几天前。

小结一下

很多时候,我们不写文档自动化脚本,不是因为没需求,而是因为现有的方案要么门槛太高、要么坑太多。

docx.js 的核心价值就是把这道门槛降到最低了。

它让你可以把精力花在业务逻辑上,而不是研究怎么调用 COM 接口、怎么处理编码问题。

如果你的项目需要生成 Word 文档,无论是合同模板、报表导出还是简历生成,可以去试试这个项目。

相关推荐
kyriewen13 分钟前
我用了三周Claude Code Skills——总结出5条铁律,第3条最反直觉
前端·ai编程·claude
阳光是sunny16 分钟前
LangGraph实战教程:控制流详解
前端·人工智能·后端
格尔曼Noah1 小时前
Safari浏览器中如何只允许指定网站下载
前端·safari
l156469482 小时前
突围!图文混合知识库难以解析,Kimi-K3 原生视觉架构深耕知识工作,DMXAPI 统一接口,缩短项目开发周期
java·大数据·开发语言
用户059540174462 小时前
用了3年Redis,才发现我一直没搞懂缓存一致性测试
前端·css
charlie1145141912 小时前
现代C++工程实践 WeakPtr 实战(三):WeakPtrFactory 与「最后成员」惯用法
开发语言·c++·开源项目·现代c++
swipe2 小时前
07|(前端转后全栈)为什么后端也要缓存?从前端缓存思维理解 Redis
前端·后端·全栈
IT小盘2 小时前
05-企业项目统一接入多个大模型-适配器模式实战
前端·人工智能·适配器模式
swipe2 小时前
06|(前端转后全栈)登录后端到底在做什么?JWT、Spring Security 和权限链路
前端·后端·全栈
海上彼尚3 小时前
Nodejs也能写Agent - 22.LangGraph篇 - 上下文工程
前端·javascript·人工智能·langchain·node.js