React前端实现将Word(Doc/Docx)转HTML

# 创建名为"word-to-html-converter"的React项目（项目名可自定义）
npx create-react-app word-to-html-converter

cd word-to-html-converter
npm start

npm i spire.doc

// 导入React核心库及必要的钩子函数
// useState用于管理组件内部状态，useEffect用于处理副作用（如资源加载）
import React, { useState, useEffect } from 'react';

// 定义App组件，作为应用的主组件
function App() {

  // 定义状态变量wasmModule，用于存储加载完成的WASM模块
  const [wasmModule, setWasmModule] = useState(null);

  // 使用useEffect钩子在组件挂载时加载WASM模块
  useEffect(() => {
    // 定义异步函数loadWasm，用于处理WASM模块的加载逻辑
    const loadWasm = async () => {
      try {
        // 从全局window对象中获取WASM相关的Module和spiredoc对象
        const { Module, spiredoc } = window;

        // 当WASM运行时初始化完成后，将spiredoc模块存入状态
        Module.onRuntimeInitialized = () => {
          setWasmModule(spiredoc);
        };
      } catch (err) {
        // 捕获并打印WASM模块加载过程中的错误
        console.error('Failed to load WASM module:', err);
      }
    };

    // 动态创建script标签，用于加载WASM的JavaScript包装文件
    const script = document.createElement('script');
    // 设置脚本路径：从公共目录（public）加载Spire.Doc.Base.js
    script.src = `${process.env.PUBLIC_URL}/Spire.Doc.Base.js`;
    // 脚本加载完成后执行loadWasm函数，开始初始化WASM
    script.onload = loadWasm;

    // 将脚本添加到页面body中，触发加载
    document.body.appendChild(script);

    // 定义清理函数，在组件卸载时移除动态创建的script标签
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  // 定义Word转HTML的核心函数，异步处理文件转换逻辑
  const WordToHtml = async () => {
    // 检查WASM模块是否已加载，未加载则不执行后续操作
    if (wasmModule) {
      // 1. 加载字体文件到WASM的虚拟文件系统（VFS）
      await wasmModule.FetchFileToVFS(
        'CALIBRI.ttf',          // 字体文件名
        '/Library/Fonts/',      // 虚拟文件系统中的目标路径
        `${process.env.PUBLIC_URL}/`  // 字体文件的基础路径（公共目录）
      );

      // 2. 指定输入和输出文件名称
      const inputFileName = 'sample.docx';   // 待转换的Word文件名（需放在public目录）
      const outputFileName = 'WordToHtml.html';  // 转换后的HTML文件名

      // 3. 创建文档实例，用于处理Word文件
      const doc = wasmModule.Document.Create();

      // 4. 将输入的Word文件加载到虚拟文件系统
      await wasmModule.FetchFileToVFS(
        inputFileName,          // 输入文件名
        '',                     // 虚拟路径为空表示根目录
        `${process.env.PUBLIC_URL}/`  // 文件基础路径
      );

      // 5. 从虚拟文件系统加载Word文件到文档实例
      doc.LoadFromFile(inputFileName);

      // 6. 将文档保存为HTML格式到虚拟文件系统
      doc.SaveToFile({
        fileName: outputFileName,
        fileFormat: wasmModule.FileFormat.Html
      });

      // 7. 从虚拟文件系统读取转换后的HTML文件内容
      const modifiedFileArray = wasmModule.FS.readFile(outputFileName);

      // 8. 将二进制数组转换为Blob对象（二进制大对象），便于创建下载链接
      // 指定MIME类型为text/html，确保浏览器正确识别
      const modifiedFile = new Blob([modifiedFileArray], { type: 'text/html' });

      // 9. 创建Blob对象的临时URL，用于下载
      const url = URL.createObjectURL(modifiedFile);

      // 10. 创建a标签触发文件下载
      const a = document.createElement("a");
      a.href = url;          // 设置下载链接
      a.download = outputFileName;  // 设置下载文件名
      document.body.appendChild(a); // 将a标签添加到页面
      a.click();             // 模拟点击触发下载
      document.body.removeChild(a); // 下载后移除a标签
      URL.revokeObjectURL(url); // 释放临时URL，避免内存泄漏

      // 11. 释放文档资源，避免内存占用
      doc.Dispose();
    }
  };

  // 组件渲染部分：展示页面UI
return (
    <div style={{ maxWidth: '800px', margin: '40px auto', textAlign: 'center' }}>
      <h2 style={{ color: '#2c3e50' }}>React Word → HTML 转换器</h2>
      <p style={{ color: '#7f8c8d', margin: '20px 0' }}>
        支持.doc/.docx格式转换，点击下方按钮开始转换
      </p>
      <button
        onClick={handleWordToHtml}
        disabled={!wasmModule || converting} // WASM未加载或转换中时禁用按钮
        style={{
          padding: '12px 30px',
          fontSize: '16px',
          backgroundColor: !wasmModule || converting ? '#bdc3c7' : '#3498db',
          color: '#fff',
          border: 'none',
          borderRadius: '4px',
          cursor: !wasmModule || converting ? 'not-allowed' : 'pointer'
        }}
      >
        {converting ? '转换中...' : '开始转换'}
      </button>
    </div>
  );
};

// 导出App组件作为默认导出
export default App;

// 方案1：外部CSS（推荐，便于样式维护）
doc.HtmlExportOptions.CssStyleSheetFileName = 'converted-style.css'; // 外部CSS文件名
doc.HtmlExportOptions.CssStyleSheetType = wasmModule.CssStyleSheetType.External; // 外部样式表

// 方案2：嵌入CSS（HTML文件独立完整，无外部依赖）
// doc.HtmlExportOptions.CssStyleSheetType = wasmModule.CssStyleSheetType.Internal;

// 方案1：图片独立存储（减少HTML体积，需确保图片路径可访问）
doc.HtmlExportOptions.ImageEmbedded = false; // 不嵌入图片
doc.HtmlExportOptions.ImagesPath = 'word-images/'; // 图片存储目录（相对HTML文件路径）

// 方案2：图片base64嵌入（HTML文件独立，无需额外管理图片文件）
// doc.HtmlExportOptions.ImageEmbedded = true;

// 表单字段导出为纯文本（用户无法编辑，仅展示内容）
doc.HtmlExportOptions.IsTextInputFormFieldAsText = true;

// （可选）若需保留表单交互功能，需额外处理（如转换为HTML原生表单元素）
// doc.HtmlExportOptions.ExportFormFields = true;