基于 html-docx-js 实现前端 HTML 转 Word 文档

图片处理的关键技巧

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

开发最佳实践

1. 提供完整 HTML 结构：始终包含 DOCTYPE、html 和 body 标签
2. 优化 CSS 样式：在 style 标签中定义样式规则
3. 预处理图片：确保所有图片都转换为 base64 格式
4. 全面测试兼容性：在不同浏览器中验证转换效果

浏览器兼容性

html-docx-js 支持以下现代浏览器：

• Google Chrome 36+
• Safari 7+
• Internet Explorer 10+

注意：部分浏览器的文件下载可能需要用户交互确认。