React结合JavaScript前端实现将HTML导出Word文档

npm i spire.office

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

useEffect(() => {
  (async () => {
    try {
      const publicUrl = process.env.PUBLIC_URL || '';
      // 动态加载 Spire.Doc 主脚本
      const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.doc.js`);
      const rawModule = spireModule.default || spireModule;
      
      // 初始化 WASM 运行时
      window.wasmModule = typeof rawModule === 'function'
        ? await rawModule({ 
            locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p 
          })
        : rawModule;
      
      setWasmModule(window.wasmModule);
    } catch (error) {
      console.error('WASM 模块加载失败:', error);
    }
  })();
}, []);

// 加载字体文件到 VFS 的字体目录
await window.spire.FetchFileToVFS('CALIBRI.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);

// 加载待转换的 HTML 文件到 VFS 根目录
const inputFileName = 'sample.html';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);

const wasmAPI = window.wasmModule.spiredoc;
// 创建文档对象
const doc = new wasmAPI.Document();

// 加载 HTML 文件，跳过严格校验以提升兼容性
doc.LoadFromFile({
  fileName: inputFileName,
  fileFormat: wasmAPI.FileFormat.Html,
  validationType: wasmAPI.XHTMLValidationType.None
});

// 保存为 Word 文档到虚拟文件系统
const outputFileName = 'HtmlToWord.docx';
doc.SaveToFile({
  fileName: outputFileName,
  fileFormat: wasmAPI.FileFormat.Docx
});

// 从虚拟文件系统读取二进制数据
const fileBuffer = window.dotnetRuntime.Module.FS.readFile(outputFileName);
// 封装为 Blob 对象
const fileBlob = new Blob([fileBuffer], {
  type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});

// 动态创建下载链接
const url = URL.createObjectURL(fileBlob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
document.body.appendChild(a);
a.click();

// 清理 DOM 与内存
document.body.removeChild(a);
URL.revokeObjectURL(url);

// 释放文档对象，避免 WASM 内存泄漏
doc.Dispose();

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

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

  // 组件挂载时加载 WASM 模块
  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('Spire.Doc 模块加载失败:', error);
      }
    })();
  }, []);

  // 执行 HTML 转 Word
  const handleConvert = async () => {
    const wasmAPI = window.wasmModule.spiredoc;
    if (!wasmAPI) return;

    try {
      // 1. 加载字体文件
      await window.spire.FetchFileToVFS(
        'CALIBRI.ttf', 
        '/Library/Fonts/', 
        `${process.env.PUBLIC_URL}/static/font/`
      );

      // 2. 加载 HTML 源文件
      const inputFileName = 'sample1.html';
      await window.spire.FetchFileToVFS(
        inputFileName, 
        '', 
        `${process.env.PUBLIC_URL}/static/data/`
      );

      // 3. 执行格式转换
      const doc = new wasmAPI.Document();
      doc.LoadFromFile({
        fileName: inputFileName,
        fileFormat: wasmAPI.FileFormat.Html,
        validationType: wasmAPI.XHTMLValidationType.None
      });

      const outputFileName = 'HtmlToWord.docx';
      doc.SaveToFile({
        fileName: outputFileName,
        fileFormat: wasmAPI.FileFormat.Docx
      });

      // 4. 触发浏览器下载
      const fileBuffer = window.dotnetRuntime.Module.FS.readFile(outputFileName);
      const fileBlob = new Blob([fileBuffer], {
        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      });

      const url = URL.createObjectURL(fileBlob);
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);
      a.click();

      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      doc.Dispose();
    } catch (err) {
      console.error('转换失败:', err);
    }
  };

  return (
    <div style={{ textAlign: 'center', padding: '60px 20px' }}>
      <h1>HTML 转 Word 文档（React 前端实现）</h1>
      <button 
        onClick={handleConvert} 
        disabled={!wasmModule}
        style={{ padding: '10px 24px', fontSize: '16px', cursor: 'pointer' }}
      >
        {wasmModule ? '开始转换' : '模块加载中...'}
      </button>
    </div>
  );
}

export default HtmlToWordConverter;