本文详解如何在浏览器中将修改后的 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(...)。同时，需确保脚本加载顺序无误（建议置于所有依赖之后）。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
2. 补充 FileSaver.js 实现文件下载
浏览器无法访问本地文件系统，必须借助 FileSaver.js 创建 Blob 并触发下载：
立即学习“前端免费学习笔记（深入）”；
<!-- 在 </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 布局、部分伪类），建议导出前移除复杂样式，优先使用<table>、内联 <code>style或语义化标签（<h1></h1>,<p></p>,<ul></ul>）。 -
字体与图标风险：Wingdings 等特殊字体在 Word 中可能回退，建议将图标（如
）替换为 Unicode 字符或 SVG 内联。 -
性能提示：大文档（>5MB HTML）可能导致内存溢出，可考虑分块渲染或服务端转换（如使用
docxtemplater+ 后端 API）。 -
替代方案参考：若
html-to-docx不满足需求，可评估docx库（声明式生成）或mammoth.js（专精 DOCX ↔ HTML 双向转换）。
通过以上修正，你的 HTML → DOCX 流程即可在纯浏览器环境中稳定运行，无需后端介入，完全符合现代 Web 应用的离线处理与用户隐私要求。
