html-docx-js 使用教程：浏览器中HTML转DOCX的完整指南
项目地址: https://gitcode.com/gh_mirrors/ht/html-docx-js html-docx-js 是一个轻量级的JavaScript库，专门用于在浏览器中将HTML文档转换为DOCX格式。该库支持Microsoft Word 2007及以上版本，并利用"altchunks"特性实现转换功能。通过MHT文档格式处理内嵌内容，包括图片支持。
项目快速启动
安装方法
通过npm安装html-docx-js：
npm install html-docx-js
基础使用示例
以下是一个简单的转换示例，将HTML内容转换为DOCX文件：
const HTMLtoDOCX = require('html-docx-js');
const fs = require('fs');
const html = '<!DOCTYPE html><html><body><h1>Hello, World!</h1><p>这是一个示例文档</p></body></html>';
const docx = HTMLtoDOCX.asBlob(html, {orientation: 'portrait'});
// 保存文件
fs.writeFile('output.docx', docx, (err) => {
if (err) throw err;
console.log('文档创建成功!');
});
核心功能详解
页面设置选项
html-docx-js 提供丰富的页面配置选项：
const options = {
orientation: 'landscape', // 页面方向：landscape(横向)或portrait(纵向)
margins: {
top: 1440, // 上边距（1/20点为单位）
right: 1440, // 右边距
bottom: 1440, // 底边距
left: 1440, // 左边距
header: 720, // 页眉边距
footer: 720, // 页脚边距
gutter: 0 // 装订线边距
}
};
const converted = HTMLtoDOCX.asBlob(htmlContent, options);
图片支持
该库支持Base64编码的内联图片：
<!DOCTYPE html>
<html>
<body>
<h1>带图片的文档</h1>
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD..." alt="示例图片">
<p>这是包含图片的文档内容</p>
</body>
</html>
应用案例
在线编辑器导出功能
在Web编辑器中实现DOCX导出功能：
// 获取编辑器内容
const editorContent = document.getElementById('editor').innerHTML;
// 转换为DOCX
const convertedDocx = HTMLtoDOCX.asBlob(editorContent);
// 使用FileSaver保存文件
const blob = new Blob([convertedDocx], {
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
});
saveAs(blob, 'document.docx');
Node.js环境使用
在服务器端使用html-docx-js：
const HTMLtoDOCX = require('html-docx-js');
const fs = require('fs');
// 读取HTML文件
const htmlContent = fs.readFileSync('input.html', 'utf8');
// 转换并保存
const docxBuffer = HTMLtoDOCX.asBlob(htmlContent);
fs.writeFileSync('output.docx', docxBuffer);
最佳实践建议
1. 完整的HTML结构
确保传递完整的HTML文档，包括DOCTYPE、html和body标签：
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: #2c3e50; }
p { font-size: 14px; line-height: 1.6; }
</style>
</head>
<body>
<h1>标题</h1>
<p>正文内容</p>
</body>
</html>
2. 样式处理
通过内联样式或style标签定义CSS规则，确保在DOCX中正确显示。
3. 图片预处理
将外部图片转换为Base64格式：
function convertImagesToBase64(htmlContent) {
// 实现图片转换逻辑
return processedHtml;
}
兼容性说明
- ✅ Microsoft Word 2007+
- ⚠️ LibreOffice Writer（部分支持）
- ⚠️ Google Docs（部分支持）
- ✅ WPS Writer
- ✅ 现代浏览器（Chrome、Firefox、Safari、Edge）
项目结构
html-docx-js/
├── src/
│ ├── api.coffee # 主要API接口
│ ├── internal.coffee # 内部实现逻辑
│ ├── utils.coffee # 工具函数
│ ├── assets/ # DOCX模板资源
│ └── templates/ # 模板文件
├── test/ # 测试文件
└── package.json # 项目配置
开发注意事项
- 依赖管理：项目使用CoffeeScript编写，构建需要gulp和browserify
- 测试验证：包含完整的测试用例，确保转换质量
- 文档规范：遵循MIT开源协议，代码注释完整
通过html-docx-js，开发者可以轻松实现在浏览器环境中将HTML内容转换为专业的DOCX文档，满足各种文档导出需求。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
