本文详解如何在浏览器中将 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）。
✅ 正确实现步骤如下：
-
引入必要依赖（确保顺序正确）：
立即学习“前端免费学习笔记（深入）”；
DeepBI DHTML 页面生成器下载生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
jszip（html-to-docx依赖） -
docx-preview（渲染原始文档） -
html-to-docx.umd.js（核心转换库） -
FileSaver.js（浏览器端文件保存）
-
修正调用方式：使用
await window.HTMLtoDOCX(htmlString, null, options)，而非裸名调用。生成并下载 Blob：将返回的
ArrayBuffer封装为Blob，再通过saveAs()触发下载。
以下是精简、健壮的完整实现（含错误处理与注释）：
<!-- 在 <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支持基础标签（<p></p>,<h1></h1>,<table>, <code><ul></ul>等），但不支持内联样式以外的 CSS 类、<style></style>标签或复杂 Flex/Grid 布局。建议仅保留style属性中的字体、颜色、对齐等关键样式。 -
字体与符号风险：Wingdings 等特殊字体符号（如
）在导出后可能显示为方块或乱码。如需保留语义，建议提前替换为 Unicode 字符（如→或-->）。 -
中文支持：确保 HTML 中
<meta charset="UTF-8">已声明，且html-to-docx版本 ≥ 2.0（当前 CDN 链接已满足）。 - 性能提示：大段 HTML（>10k 字符）可能导致主线程阻塞，可考虑添加加载状态提示。
该方案完全运行于浏览器端，无需后端服务，符合现代 PWA 架构原则。经实测，可稳定生成 Microsoft Word 兼容的 .docx 文件，支持打开、编辑、打印等全部标准操作。
