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

相关推荐
FuckPatience28 分钟前
Visual Studio C# 项目中文件后缀简介
开发语言·c#
林恒smileZAZ3 小时前
Vue<前端页面版本检测>
前端·javascript·vue.js
码事漫谈6 小时前
当AI开始“思考”:我们是否真的准备好了?
前端·后端
许杰小刀7 小时前
ctfshow-web文件包含(web78-web86)
android·前端·android studio
014-code7 小时前
订单超时取消与库存回滚的完整实现(延迟任务 + 状态机)
java·开发语言
lly2024067 小时前
组合模式(Composite Pattern)
开发语言
我是Superman丶8 小时前
Element UI 表格某行突出悬浮效果
前端·javascript·vue.js
恋猫de小郭8 小时前
你的代理归我了:AI 大模型恶意中间人攻击,钱包都被转走了
前端·人工智能·ai编程
游乐码8 小时前
c#泛型约束
开发语言·c#
Dontla8 小时前
go语言Windows安装教程(安装go安装Golang安装)(GOPATH、Go Modules)
开发语言·windows·golang