React实现Word文档转HTML的实践方案详解

npm i spire.office jszip

import React, { useState, useEffect } from 'react';
import JSZip from 'jszip';

function App() {
  const [wasmModule, setWasmModule] = useState(null);

  useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.doc.js`);
        const rawModule = spireModule.default || spireModule;
        window.wasmModule = typeof rawModule === 'function'
          ? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
          : rawModule;
        setWasmModule(window.wasmModule);
      } catch (error) {
        console.error('Failed to load WASM module:', error);
      }
    })();
  }, []);

  // 转换函数将在后续定义
}

const convertWordToHtmlAndZip = async () => {
  const docModule = window.wasmModule?.spiredoc;
  if (wasmModule) {
  
    // 1. 加载字体到 VFS
    await window.spire.FetchFileToVFS('CALIBRI.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);

    // 2. 加载 Word 文档到 VFS
    const inputFileName = 'input.docx';
    const outputFolderName = 'WordToHTMLOutput';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);

    // 3. 创建 Document 实例并加载文档
    const doc = new docModule.Document();
    doc.LoadFromFile({ fileName: inputFileName });

    // 4. 保存为 HTML 格式到指定目录
    doc.SaveToFile({ fileName: `${outputFolderName}/document.html`, fileFormat: wasmModule.FileFormat.Html });

    // 5. 释放文档资源
    doc.Dispose();

    // 6. 创建 JSZip 实例，用于打包
    const zip = new JSZip();

    // 7. 递归遍历 VFS 目录，将所有文件添加到 ZIP
    const addFilesToZip = (folderPath, zipFolder) => {
      const items = window.dotnetRuntime.Module.FS.readdir(folderPath);
      items.filter(item => item !== "." && item !== "..").forEach((item) => {
          const itemPath = `${folderPath}/${item}`;

          try {
            const fileData = window.dotnetRuntime.Module.FS.readFile(itemPath);
            zipFolder.file(item, fileData);
          } catch (error) {
            if (error.code === 'EISDIR') {
              // 如果是目录，递归处理
              const zipSubFolder = zipFolder.folder(item);
              addFilesToZip(itemPath, zipSubFolder);
            } else {
              console.error(`Error processing ${itemPath}:`, error);
            }
          }
        });
    };

    // 8. 将输出目录中的所有文件添加到 ZIP
    addFilesToZip(outputFolderName, zip);

    // 9. 生成并下载 ZIP 文件
    zip.generateAsync({ type: 'blob' }).then((content) => {
    const url = URL.createObjectURL(content);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${outputFolderName}.zip`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);

  } catch (error) {
    console.error('Conversion failed:', error);
  }
};