前言
html-docx-js 是一个轻量级 JavaScript 库，支持在浏览器或 Node.js 环境中直接将 HTML 内容转换为 DOCX 格式。它无需服务器支持，利用 Microsoft Word 的 altchunks 功能处理 HTML 元素的转换，真正实现了前端文档生成。
核心优势
- 纯前端实现：无需服务器支持，降低系统依赖
- 丰富格式支持：文本、图片、列表、表格等一应俱全
- 跨平台兼容：支持 Node.js 环境，适应多种开发场景
- 灵活配置：可自定义页面方向、边距等文档属性
快速上手
1. 获取项目
克隆项目仓库到本地。
2. 安装依赖
进入项目目录后执行安装命令并构建。
npm install
npm run build
3. 准备 HTML 内容
确保提供完整的 HTML 文档结构：
<!DOCTYPE html>
<html>
<head>
<title>我的文档</title>
<style>
h1 { color: #2c3e50; }
p { font-size: 14px; }
</style>
</head>
<body>
<h1>文档标题</h1>
<p>这里是文档内容...</p>
</body>
</html>
4. 执行转换
// 导入库文件
var htmlDocx = require('html-docx-js');
// 执行转换
var converted = htmlDocx.asBlob(htmlContent);
// 下载文档
saveAs(converted, 'my-document.docx');
图片处理的关键技巧
html-docx-js 仅支持 base64 编码的内联图片。如果你的图片是普通 URL 格式，需要进行转换：
function convertImagesToBase64() {
var images = document.querySelectorAll('img');
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
images.forEach(function(img) {
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0);
var base64Data = canvas.toDataURL();
img.src = base64Data;
});
}
高级配置选项
通过配置对象，你可以自定义文档的多种属性：
var options = {
orientation: 'portrait', // 页面方向：portrait 或 landscape
margins: {
top: 1440, // 上边距（1/20 磅）
right: 1440, // 右边距
bottom: 1440,// 下边距
left: 1440, // 左边距
header: 720, // 页眉边距
footer: 720 // 页脚边距
}
};
var converted = htmlDocx.asBlob(content, options);
实际应用场景
- 在线文档编辑器：用户可以在富文本编辑器中编辑内容，然后一键导出为 Word 文档。
- 业务报告系统：动态生成包含图表、表格和文本的业务分析报告，支持自定义页面设置。
- 内容管理系统：将网站内容导出为可编辑的 Word 格式，便于内容二次加工和分发。
项目架构解析
主要文件结构如下：
src/
├── api.coffee # 主 API 入口
├── internal.coffee # 内部处理逻辑
├── utils.coffee # 工具函数
└── templates/ # 文档模板
├── document.tpl
└── mht_document.tpl
开发最佳实践
- 提供完整 HTML 结构：始终包含 DOCTYPE、html 和 body 标签
- 优化 CSS 样式：在 style 标签中定义样式规则
- 预处理图片：确保所有图片都转换为 base64 格式
- 全面测试兼容性：在不同浏览器中验证转换效果
浏览器兼容性
html-docx-js 支持以下现代浏览器：
- Google Chrome 36+
- Safari 7+
- Internet Explorer 10+
注意：部分浏览器的文件下载可能需要用户交互确认。
