将 Word 文档转换为 HTML，能够完整保留原有的段落结构、样式与图片，并直接在浏览器中渲染，广泛用于在线预览、内容发布和全文检索等场景。Spire.Doc for JavaScript 基于 WebAssembly 在浏览器端直接完成此转换，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。

本文介绍两个核心功能点：

• 转换 Word 到 HTML
• 转换 Word 到 HTML 并配置导出选项

有关安装和项目配置，请参考 React 项目中集成 Spire.Doc for JavaScript。以下示例默认已安装 Spire.Doc 并完成 WebAssembly 模块初始化。

转换 Word 到 HTML

Word 转 HTML 的核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件和目标 Word 文件载入 WASM 虚拟文件系统；然后实例化 Document 加载文件，通过 HtmlExportOptions 指定 CSS 与图片均以内嵌方式输出，再调用 SaveToFile 将文档保存为 HTML；最后从 VFS 读取生成的 HTML 文件，封装为 Blob 后触发浏览器下载。

function App() {
  const wordToHtml = async () => {
    // 获取 Spire.Doc WASM 模块
    const docModule = window.wasmModule?.spiredoc;

    // 检查模块是否就绪
    if (!docModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // 将字体和 Word 文件载入 VFS
    await window.spire.FetchFileToVFS('ARIALUNI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);
    const inputFileName = 'ToHtml.docx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);

    // 加载 Word 文档
    const wordDocument = new docModule.Document();
    wordDocument.LoadFromFile(inputFileName);

    // 将 CSS 样式内嵌到 HTML，并将图片以 Base64 内嵌
    wordDocument.HtmlExportOptions.CssStyleSheetType = docModule.CssStyleSheetType.Internal;
    wordDocument.HtmlExportOptions.ImageEmbedded = true;

    // 将文档转换为 HTML
    const outputFileName = 'ToHtml-result.html';
    wordDocument.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Html });

    // 从 VFS 读取转换后的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'text/html;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = window.document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);

    // 释放资源
    wordDocument.Dispose();
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>转换Word到HTML</h1>
      <button onClick={wordToHtml}>
        生成
      </button>
    </div>
  );
}

export default App;

Word 文档通过 SaveToFile 转换后生成的 HTML 页面

转换 Word 到 HTML 并配置导出选项

上一节的输出是单个 HTML 文件，CSS 与图片都被内嵌其中。当文档体积较大，或希望统一维护样式、复用图片资源时，通常需要将 CSS 与图片导出为独立文件。HtmlExportOptions 提供了对应的配置项，使 HTML、样式表与图片分离输出。

转换流程与前一节类似，区别在于输出结果是一个目录：需要先在 VFS 中创建目录，再通过 CssStyleSheetFileName、ImagesPath 等属性指定各类资源的存放位置，转换完成后递归读取该目录并打包为 zip 一并下载。

import JSZip from 'jszip';

function App() {
  const wordToHtmlWithOptions = async () => {
    // 获取 Spire.Doc WASM 模块
    const docModule = window.wasmModule?.spiredoc;

    // 检查模块是否就绪
    if (!docModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // 将字体和 Word 文件载入 VFS
    await window.spire.FetchFileToVFS('ARIALUNI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);
    const inputFileName = 'ToHtml.docx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);

    // 在 VFS 中创建输出目录
    const outputDirectoryName = 'ToHTMLFolder/';
    window.dotnetRuntime.Module.FS.mkdirTree(outputDirectoryName);

    // 加载 Word 文档
    const wordDocument = new docModule.Document();
    wordDocument.LoadFromFile(inputFileName);

    // 将 CSS 样式导出为独立文件
    wordDocument.HtmlExportOptions.CssStyleSheetFileName = outputDirectoryName + 'sample.css';
    wordDocument.HtmlExportOptions.CssStyleSheetType = docModule.CssStyleSheetType.External;

    // 将图片导出到独立目录
    wordDocument.HtmlExportOptions.ImageEmbedded = false;
    wordDocument.HtmlExportOptions.ImagesPath = outputDirectoryName + 'Demo/';

    // 将表单域导出为纯文本
    wordDocument.HtmlExportOptions.IsTextInputFormFieldAsText = true;

    // 将文档转换为 HTML
    const outputFileName = 'ToHtmlExportOption-out.html';
    wordDocument.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Html });

    // 释放资源
    wordDocument.Dispose();

    // 递归读取输出目录，将各层级文件写入 zip
    const zip = new JSZip();
    const addFilesToZip = async (folderPath, zipFolder) => {
      let items = await window.dotnetRuntime.Module.FS.readdir(folderPath);
      items = items.filter((item) => item !== '.' && item !== '..');
      for (const item of items) {
        const itemPath = `${folderPath}/${item}`;
        try {
          const fileData = await window.dotnetRuntime.Module.FS.readFile(itemPath);
          zipFolder.file(item, fileData);
        } catch (error) {
          const zipSubFolder = zipFolder.folder(item);
          await addFilesToZip(itemPath, zipSubFolder);
        }
      }
    };

    // HTML 文件与资源目录一并打包
    zip.file(outputFileName, window.dotnetRuntime.Module.FS.readFile(outputFileName));
    await addFilesToZip(outputDirectoryName, zip);
    const zipBlob = await zip.generateAsync({ type: 'blob' });
    const url = URL.createObjectURL(zipBlob);

    // 触发下载
    const a = window.document.createElement('a');
    a.href = url;
    a.download = 'ToHTMLFolder.zip';
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>用导出选项转换Word到HTML</h1>
      <button onClick={wordToHtmlWithOptions}>
        生成
      </button>
    </div>
  );
}

export default App;

配置导出选项后生成的 HTML、CSS 与图片文件

需要注意的是，Spire.Doc 并不会把图片直接写入 ImagesPath 指向的目录，而是在其下再创建一个 external_images 子目录存放图片。因此输出目录通常会形成 Demo/external_images/*.png 这样的层级，读取时需要逐层递归，这也是上例中 addFilesToZip 采用递归实现的原因。

常见问题

导出 HTML 中的字体与原文不一致

原因：WASM 虚拟文件系统中缺少字体文件。Spire.Doc 在转换时会从 VFS 读取字体以完成排版计算与字体名解析，若未预加载，原文使用的字体会被替换为替代字体，导出的 CSS 中 font-family 与原文不符；若原文使用了 Wingdings 等符号字体，对应的字符还会变成乱码。

解决：转换前通过 FetchFileToVFS 将字体文件载入 VFS，中日韩文档建议使用 ARIALUNI.TTF 这类覆盖完整的字体：

await window.spire.FetchFileToVFS(
  'ARIALUNI.TTF', '/Library/Fonts/', '/'
);

导出的 HTML 打开后样式与图片丢失

原因：使用外链模式（CssStyleSheetType.External 配合 ImageEmbedded = false）时，CSS 与图片会作为独立文件输出到指定目录，HTML 中仅保留相对路径引用。若只下载 HTML 文件，浏览器将找不到对应的样式表与图片，页面会退化为无样式的纯文本。

解决：将 HTML 文件与资源目录一并打包下载，确保相对路径引用有效（见上文 addFilesToZip 示例）。若不需要独立的资源文件，也可改用内嵌模式：

wordDocument.HtmlExportOptions.CssStyleSheetType = docModule.CssStyleSheetType.Internal;
wordDocument.HtmlExportOptions.ImageEmbedded = true;

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。