本文详解如何在浏览器中将修改后的 HTML 内容（如经 docx-preview 渲染并处理过的富文本）可靠地转换为标准 .docx 文件，重点解决 HTMLtoDOCX is not defined 错误，并提供完整可运行的前端实现。

本文详解如何在浏览器中将修改后的 html 内容（如经 docx-preview 渲染并处理过的富文本）可靠地转换为标准 .docx 文件，重点解决 `htmltodocx is not defined` 错误，并提供完整可运行的前端实现。

在前端 Web 应用中，将 HTML 转换为 .docx 文件是一个常见但易出错的需求——尤其当流程涉及“读取 Word → 渲染为 HTML → 修改样式/内容 → 导出为新 Word”时。你遇到的 ReferenceError: HTMLtoDOCX is not defined 错误，根本原因在于：html-to-docx 库通过 UMD 模式导出，其全局变量名是 window.HTMLtoDOCX，而非裸名 HTMLtoDOCX；同时，原代码中缺失关键依赖 FileSaver.js，且错误调用了 Node.js 风格的 fs.writeFile（浏览器环境不可用）。

✅ 正确做法如下：

1. 确保库正确加载并访问全局实例

html-to-docx 的 UMD 版本（如 dist/html-to-docx.umd.js）会自动挂载到 window.HTMLtoDOCX。务必使用 window.HTMLtoDOCX(...) 调用，而非直接 HTMLtoDOCX(...)。同时，需确保脚本加载顺序无误（建议置于所有依赖之后）。

2. 补充 FileSaver.js 实现文件下载

浏览器无法访问本地文件系统，必须借助 FileSaver.js 创建 Blob 并触发下载：

DeepBI DHTML 页面生成器

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

下载

<!-- 在 </body> 前添加 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

3. 完整修正后的导出逻辑（含错误处理）

document.getElementById("downloadButton").addEventListener("click", async function () {
  if (!modifiedContent.trim()) {
    alert("No content to export. Please load and process a .docx file first.");
    return;
  }

  try {
    // ✅ 正确调用：显式使用 window.HTMLtoDOCX
    const fileBuffer = await window.HTMLtoDOCX(modifiedContent, null, {
      table: { row: { cantSplit: true } },
      footer: true,
      pageNumber: true,
    });

    // ✅ 创建 Blob 并下载
    const blob = new Blob([fileBuffer], {
      type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    });

    saveAs(blob, "modified_document.docx");
    console.log("✅ DOCX file generated and downloaded successfully.");
  } catch (err) {
    console.error("❌ DOCX conversion failed:", err);
    alert(`Export failed: ${err.message || 'Unknown error'}`);
  }
});

⚠️ 注意事项与最佳实践

• HTML 结构兼容性：html-to-docx 对 CSS 支持有限（如不支持 Flex/Grid 布局、部分伪类），建议导出前移除复杂样式，优先使用 、内联 style 或语义化标签（
  ,
  ,
  ）。
  字体与图标风险：Wingdings 等特殊字体在 Word 中可能回退，建议将图标（如 ）替换为 Unicode 字符或 SVG 内联。
  性能提示：大文档（>5MB HTML）可能导致内存溢出，可考虑分块渲染或服务端转换（如使用 docxtemplater + 后端 API）。
  替代方案参考：若 html-to-docx 不满足需求，可评估 docx 库（声明式生成）或 mammoth.js（专精 DOCX ↔ HTML 双向转换）。

  通过以上修正，你的 HTML → DOCX 流程即可在纯浏览器环境中稳定运行，无需后端介入，完全符合现代 Web 应用的离线处理与用户隐私要求。

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