如何将 HTML 内容转换并保存为 .docx 文档（纯前端方案）-html教程-PHP中文网

如何将 HTML 内容转换并保存为 .docx 文档（纯前端方案）

本文详解如何在浏览器中将 HTML 字符串（如 docx-preview 渲染后修改的内容）可靠地转换为标准 .docx 文件，解决 HTMLtoDOCX is not defined 等常见错误，并提供完整可运行的前端代码。

本文详解如何在浏览器中将 html 字符串（如 docx-preview 渲染后修改的内容）可靠地转换为标准 .docx 文件，解决 `htmltodocx is not defined` 等常见错误，并提供完整可运行的前端代码。

在前端 Web 应用中实现 Word 文档的「读取 → HTML 编辑 → 保存为 .docx」闭环，是许多文档处理场景的核心需求。你已成功使用 docx-preview 将 .docx 渲染为 HTML 并完成样式/字符修改，但卡在最后一步：将修改后的 HTML 安全、准确地导出为合法 .docx 文件。

关键问题在于 html-to-docx 库的正确调用方式——它并非挂载在全局 HTMLtoDOCX，而是通过 window.HTMLtoDOCX 访问（UMD 版本在浏览器中自动注册到 window 对象）。原代码中直接调用 HTMLtoDOCX(...) 会触发 ReferenceError；同时，fs.writeFile 是 Node.js API，在浏览器中不可用，必须替换为前端文件下载方案（如 FileSaver.js）。

✅ 正确实现步骤如下：

引入必要依赖（确保顺序正确）：
- jszip（html-to-docx 依赖）
- docx-preview（渲染原始文档）
- html-to-docx.umd.js（核心转换库）
- FileSaver.js（浏览器端文件保存）
修正调用方式：使用 await window.HTMLtoDOCX(htmlString, null, options)，而非裸名调用。
生成并下载 Blob：将返回的 ArrayBuffer 封装为 Blob，再通过 saveAs() 触发下载。

DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

以下是精简、健壮的完整实现（含错误处理与注释）：

<!-- 在 <head> 或 </body> 前添加以下 CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script><!-- 其他原有 script 标签保持不变 -->

document.getElementById('downloadButton').addEventListener('click', async function() {
  try {
    const htmlString = document.getElementById('container').innerHTML;

    // ✅ 正确调用：显式使用 window.HTMLtoDOCX
    const fileBuffer = await window.HTMLtoDOCX(htmlString, null, {
      table: { row: { cantSplit: true } },
      footer: true,
      pageNumber: true,
      margins: { top: 720, bottom: 720, left: 720, right: 720 } // 可选：设置页边距（单位：twips）
    });

    // ✅ 创建 Blob 并下载（替代 fs.writeFile）
    const blob = new Blob([fileBuffer], {
      type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
    });
    saveAs(blob, 'modified_document.docx');

    console.log('✅ DOCX 文件已成功生成并下载');
  } catch (err) {
    console.error('❌ DOCX 导出失败:', err);
    alert('文档导出失败，请检查控制台错误信息');
  }
});

⚠️ 重要注意事项：

HTML 结构兼容性：html-to-docx 支持基础标签（, , , 等），但不支持内联样式以外的 CSS 类、标签或复杂 Flex/Grid 布局。建议仅保留 style 属性中的字体、颜色、对齐等关键样式。字体与符号风险：Wingdings 等特殊字体符号（如 ）在导出后可能显示为方块或乱码。如需保留语义，建议提前替换为 Unicode 字符（如 → 或 -->）。中文支持：确保 HTML 中已声明，且 html-to-docx 版本 ≥ 2.0（当前 CDN 链接已满足）。性能提示：大段 HTML（>10k 字符）可能导致主线程阻塞，可考虑添加加载状态提示。该方案完全运行于浏览器端，无需后端服务，符合现代 PWA 架构原则。经实测，可稳定生成 Microsoft Word 兼容的 .docx 文件，支持打开、编辑、打印等全部标准操作。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！