试试 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 文档,无论是合同模板、报表导出还是简历生成,可以去试试这个项目。

相关推荐
big_rabbit05022 小时前
java面试题整理
java·开发语言
张一凡932 小时前
重新理解 React 状态管理:用类的方式思考业务
前端·react.js
刺客xs2 小时前
c++模板
java·开发语言·c++
weixin_537590452 小时前
《C程序设计语言》练习答案(练习1-5)
c语言·开发语言
阳光永恒7362 小时前
Python零基础入门全套资料包免费分享 | 从0到1系统学习路线(含课件+源码+实战案例)
开发语言·python·学习·编程入门·python教程·编程学习·免费资料
紫丁香2 小时前
pytest_自动化测试1
开发语言·python·功能测试·单元测试·pytest
2301_818419012 小时前
C++中的状态模式实战
开发语言·c++·算法
独隅2 小时前
Python 标准库 (Standard Library) 全面使用指南
android·开发语言·python
封印师请假去地球钓鱼2 小时前
问题解决|word中单独一页设置横向
word