本文详解如何基于前端纯 JavaScript（无需服务端）将 HTML 字符串转换为标准 Word 文档（.docx），重点解决 HTMLtoDOCX is not defined 错误，并提供可直接运行的完整示例。
本文详解如何基于前端纯 javascript（无需服务端）将 html 字符串转换为标准 word 文档（.docx），重点解决 `htmltodocx is not defined` 错误，并提供可直接运行的完整示例。
在 Web 端处理 Word 文档时，常见需求是：上传 .docx → 渲染为 HTML（保留样式与结构）→ 修改内容（如清理特殊字符、替换符号、调整格式）→ 导出为新的 .docx 文件。你当前使用的 docx-preview 能高效渲染 DOCX 为 HTML，但反向转换（HTML → DOCX）失败的核心原因在于：html-to-docx 库在浏览器环境中需通过 window.HTMLtoDOCX 访问，而非直接调用 HTMLtoDOCX() —— 这正是 ReferenceError: HTMLtoDOCX is not defined 的根本原因。
✅ 正确集成 html-to-docx 的关键步骤
-
确保 UMD 版本脚本正确加载
使用官方推荐的 CDN 地址（注意版本稳定性）：<script src="https://cdn.jsdelivr.net/npm/html-to-docx@2.3.4/dist/html-to-docx.umd.js"></script>
⚠️ 不要省略
.umd.js后缀，且避免使用未指定版本的@latest，以防兼容性问题。 -
调用方式必须加
window.前缀
因为该库以 UMD 模式暴露全局变量，在浏览器中实际挂载在window对象下：const fileBuffer = await window.HTMLtoDOCX(htmlString, null, { table: { row: { cantSplit: true } }, footer: true, pageNumber: true }); -
导出文件需依赖
FileSaver.jshtml-to-docx仅生成ArrayBuffer（即fileBuffer），需配合 FileSaver.js 实现浏览器下载：
DeepBI DHTML 页面生成器下载生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
然后创建 Blob 并触发保存：
立即学习“前端免费学习笔记（深入）”；
const blob = new Blob([fileBuffer], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }); saveAs(blob, "modified_document.docx");
✅ 完整可运行代码（已修复所有关键错误）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Word Document Reader</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
#container { margin-top: 20px; font-size: 16px; color: #333; }
#downloadButton { display: none; margin-top: 20px; padding: 8px 16px; background: #007bff; color: white; border: none; cursor: pointer; }
</style>
</head>
<body>
<h1>Word Document Reader</h1>
<input type="file" id="fileInput" accept=".docx" />
<button id="downloadButton">Download Modified Document</button>
<div id="container"></div>
<!-- 必需依赖 -->
<script src="https://unpkg.com/promise-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="https://unpkg.com/docx-preview/dist/docx-preview.min.js"></script>
<script src="https://unpkg.com/docx/build/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html-to-docx@2.3.4/dist/html-to-docx.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script>
let currentBlob = null;
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0];
if (!file || !file.name.endsWith('.docx')) {
alert('Please upload a valid .docx file.');
return;
}
const reader = new FileReader();
reader.onload = async function(e) {
currentBlob = new Blob([e.target.result], {
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
});
try {
await docx.renderAsync(currentBlob, document.getElementById('container'));
console.log('DOCX rendered successfully');
// 示例：替换 Wingdings 箭头为文本 "-->"
const pattern = /<\/span><span><span style="font-family: Wingdings;"><\/span><\/span><span>/g;
const modifiedHtml = document.getElementById('container').innerHTML.replace(pattern, '-->');
document.getElementById('container').innerHTML = modifiedHtml;
document.getElementById('downloadButton').style.display = 'inline-block';
} catch (err) {
console.error('Rendering failed:', err);
}
};
reader.readAsArrayBuffer(file);
});
document.getElementById('downloadButton').addEventListener('click', async function() {
const htmlContent = document.getElementById('container').innerHTML;
try {
// ✅ 关键：使用 window.HTMLtoDOCX
const fileBuffer = await window.HTMLtoDOCX(htmlContent, null, {
table: { row: { cantSplit: true } },
footer: true,
pageNumber: true
});
const blob = new Blob([fileBuffer], {
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
});
saveAs(blob, 'modified_document.docx');
console.log('DOCX file saved successfully!');
} catch (err) {
console.error('DOCX conversion failed:', err);
alert('Failed to generate DOCX: ' + err.message);
}
});
</script>
</body>
</html>⚠️ 注意事项与最佳实践
-
HTML 结构限制：
html-to-docx支持常见标签（<p></p>,<h1>–<h6></h6> </h1>,<ul>/</ul> <ol></ol>,<table>），但<strong>不支持 CSS Flex/Grid、复杂定位或内联 <code>style中的transform/animation。建议用语义化标签 + 基础style（如font-weight,color,text-align）。 -
字体兼容性：生成的 DOCX 默认使用 Word 内置字体（如 Calibri）。若 HTML 中指定了非系统字体（如
"Helvetica Neue"），Word 将自动回退，无需额外处理。 -
中文支持：确保 HTML 字符编码为 UTF-8（已在
<meta charset="UTF-8">中声明），html-to-docx原生支持中文，无需额外配置。 - 性能提示：大文档（>50页）可能触发浏览器内存限制，建议对超长内容分段处理或提示用户。
通过以上方案，你即可在纯前端完成「DOCX → HTML → 修改 → DOCX」的闭环流程，无需任何服务端参与，安全、轻量且可嵌入任意 Web 应用。
