HTML 是 Web 端内容呈现与富文本编辑最通用的载体，而 Word 依然是文档交付与归档时的标准格式，两者之间的互转在报表导出、内容归档、富文本落库等场景中使用频率很高。Spire.Doc for JavaScript 基于 WebAssembly 在浏览器端直接完成此转换，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。
本文介绍两个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.Doc for JavaScript。以下示例默认已安装 Spire.Doc 并完成 WebAssembly 模块初始化。
HTML 文件转 Word
HTML 文件转 Word 的核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件和目标 HTML 文件载入 WASM 虚拟文件系统；然后实例化 Document，调用 LoadFromFile 并指定 FileFormat.Html 加载文件，由 Spire.Doc 解析其中的标签、列表与表格结构；最后调用 SaveToFile 将结果保存为 docx，从 VFS 读取生成的文件，封装为 Blob 后触发浏览器下载。
function App() {
const htmlFileToWord = async () => {
const docModule = window.wasmModule?.spiredoc;
if (!docModule) {
alert('Spire.Doc is not ready yet');
return;
}
const inputFileName = 'HtmlFileToWord.html';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 创建 Document 实例，按 HTML 格式加载文件
const doc = new docModule.Document();
doc.LoadFromFile({
fileName: inputFileName,
fileFormat: docModule.FileFormat.Html,
validationType: docModule.XHTMLValidationType.None,
});
// 定义输出文件名，保存为 Word
const outputFileName = 'HtmlFileToWord-result.docx';
doc.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Docx });
// 释放资源
doc.Dispose();
const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>将 HTML 文件转换为 Word 文档</h1>
<button onClick={htmlFileToWord}>开始</button>
</div>
);
}
export default App;
HTML 文件通过 LoadFromFile 转换后生成的 Word 文档
HTML 字符串转 Word
在实际开发中，待转换的 HTML 内容往往并不存在于磁盘上，而是富文本编辑器的提交结果、后端接口返回的片段，或由前端模板拼装出的字符串。这类输入无需载入文件，直接将字符串追加到段落即可，转换流程与 HTML 文件转 Word 类似。
function App() {
const htmlStringToWord = async () => {
const docModule = window.wasmModule?.spiredoc;
if (!docModule) {
alert('Spire.Doc is not ready yet');
return;
}
// 将字体载入 VFS
await window.spire.FetchFileToVFS("ARIALUNI.TTF","/Library/Fonts/",`${process.env.PUBLIC_URL}static/font/`);
// 定义待转换的 HTML 字符串
let HTML = "<html><head><meta charset=\"utf-8\" /><style type=\"text/css\">body{font-family:'Arial Unicode MS';font-size:11pt;}h2{font-family:'Arial Unicode MS';font-size:16pt;color:#1F4E79;}p,li,td,th{font-family:'Arial Unicode MS';font-size:11pt;}</style></head><body>";
HTML += "<h2 align=\"center\">四川省概况</h2><p><b>省情概况：</b></p> ";
HTML += "<ul type=\"disc\"><li><span style='color:#548235;'>省会成都，简称“川”或“蜀”</span></li><li>位于中国西南部，地处长江上游</li><li><span style='color:#C00000'>川西高原与四川盆地气候差异大，出行需按区域准备</span></li></ul><p><b>代表景区：</b></p>";
HTML += "<ul type=\"square\"><li>九寨沟</li><li>峨眉山 — 乐山大佛</li><li>都江堰 — 青城山</li></ul>";
HTML += "<table border=\"1\" width=\"90%\" cellspacing=\"0\" cellpadding=\"6\"><tr><th>四川省名片</th></tr><tr><td>面积约 48.6 万平方公里，居全国第五位</td></tr><tr><td>常住人口约 8300 万，多民族聚居</td></tr>";
HTML += "<tr><td>自古有“天府之国”之称，是长江上游重要生态屏障</td></tr><tr><td>国宝大熊猫的主要栖息地，野生种群数量居全国首位</td></tr></table></body></html>";
// 创建文档，并添加节与段落
const doc = new docModule.Document();
const section = doc.AddSection();
const paragraph = section.AddParagraph();
// 将 HTML 字符串追加到段落
paragraph.AppendHTML(HTML);
// 定义输出文件名，保存为 Word
const outputFileName = 'HtmlStringToWord-result.docx';
doc.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Docx2013 });
// 释放资源
doc.Dispose();
const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>将 HTML 字符串写入 Word 文档</h1>
<button onClick={htmlStringToWord}>开始</button>
</div>
);
}
export default App;
HTML 字符串通过 AppendHTML 转换后生成的 Word 文档
常见问题
转换后的 Word 中文显示为方块或乱码
原因：WASM 虚拟文件系统中缺少渲染所需的字体文件。LoadFromFile 在解析 HTML 时会为其中的文本匹配字体，AppendHTML 写入的内容同样需要按字体名查找字形，若 VFS 中没有对应字体，中文等非 ASCII 字符会显示为方块或乱码。
解决：转换前通过 FetchFileToVFS 将字体文件载入 VFS：
await window.spire.FetchFileToVFS(
'ARIALUNI.TTF', '/Library/Fonts/', '/'
);
加载 HTML 文件时抛出 Validation 相关异常
原因：XHTMLValidationType 的取值过于严格。实际 HTML 文件通常存在未闭合标签、属性大小写不规范或非标准写法，并不符合 XHTML 规范，使用严格校验会在解析阶段直接抛出异常。
解决：对来源不受控的 HTML，统一使用 XHTMLValidationType.None 关闭校验：
wordDocument.LoadFromFile({
fileName: inputFileName,
fileFormat: docModule.FileFormat.Html,
validationType: docModule.XHTMLValidationType.None,
});
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
