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

相关推荐
子兮曰3 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
小羊没烦恼!3 天前
微服务化的基石——持续集成
java·大数据·word·powerpoint·.net
子兮曰3 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
小羊没烦恼!3 天前
初探性能优化——2个月到4小时的性能提升
java·开发语言·windows·算法·c#
前端小万3 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝3 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋3 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
伞伞悦读3 天前
【第38期】Python 模块与包详解:import、from、模块搜索路径、包结构和 __init__
开发语言·python
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
C语言小火车3 天前
C/C++ 为什么需要编译器?
开发语言·c++