# 創(chuàng)建名為"word-to-html-converter"的React項(xiàng)目（項(xiàng)目名可自定義）
npx create-react-app word-to-html-converter

cd word-to-html-converter
npm start

npm i spire.doc

// 導(dǎo)入React核心庫及必要的鉤子函數(shù)
// useState用于管理組件內(nèi)部狀態(tài)，useEffect用于處理副作用（如資源加載）
import React, { useState, useEffect } from 'react';

// 定義App組件，作為應(yīng)用的主組件
function App() {

  // 定義狀態(tài)變量wasmModule，用于存儲(chǔ)加載完成的WASM模塊
  const [wasmModule, setWasmModule] = useState(null);

  // 使用useEffect鉤子在組件掛載時(shí)加載WASM模塊
  useEffect(() => {
    // 定義異步函數(shù)loadWasm，用于處理WASM模塊的加載邏輯
    const loadWasm = async () => {
      try {
        // 從全局window對(duì)象中獲取WASM相關(guān)的Module和spiredoc對(duì)象
        const { Module, spiredoc } = window;

        // 當(dāng)WASM運(yùn)行時(shí)初始化完成后，將spiredoc模塊存入狀態(tài)
        Module.onRuntimeInitialized = () => {
          setWasmModule(spiredoc);
        };
      } catch (err) {
        // 捕獲并打印WASM模塊加載過程中的錯(cuò)誤
        console.error('Failed to load WASM module:', err);
      }
    };

    // 動(dòng)態(tài)創(chuàng)建script標(biāo)簽，用于加載WASM的JavaScript包裝文件
    const script = document.createElement('script');
    // 設(shè)置腳本路徑：從公共目錄（public）加載Spire.Doc.Base.js
    script.src = `${process.env.PUBLIC_URL}/Spire.Doc.Base.js`;
    // 腳本加載完成后執(zhí)行l(wèi)oadWasm函數(shù)，開始初始化WASM
    script.onload = loadWasm;

    // 將腳本添加到頁面body中，觸發(fā)加載
    document.body.appendChild(script);

    // 定義清理函數(shù)，在組件卸載時(shí)移除動(dòng)態(tài)創(chuàng)建的script標(biāo)簽
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  // 定義Word轉(zhuǎn)HTML的核心函數(shù)，異步處理文件轉(zhuǎn)換邏輯
  const WordToHtml = async () => {
    // 檢查WASM模塊是否已加載，未加載則不執(zhí)行后續(xù)操作
    if (wasmModule) {
      // 1. 加載字體文件到WASM的虛擬文件系統(tǒng)（VFS）
      await wasmModule.FetchFileToVFS(
        'CALIBRI.ttf',          // 字體文件名
        '/Library/Fonts/',      // 虛擬文件系統(tǒng)中的目標(biāo)路徑
        `${process.env.PUBLIC_URL}/`  // 字體文件的基礎(chǔ)路徑（公共目錄）
      );

      // 2. 指定輸入和輸出文件名稱
      const inputFileName = 'sample.docx';   // 待轉(zhuǎn)換的Word文件名（需放在public目錄）
      const outputFileName = 'WordToHtml.html';  // 轉(zhuǎn)換后的HTML文件名

      // 3. 創(chuàng)建文檔實(shí)例，用于處理Word文件
      const doc = wasmModule.Document.Create();

      // 4. 將輸入的Word文件加載到虛擬文件系統(tǒng)
      await wasmModule.FetchFileToVFS(
        inputFileName,          // 輸入文件名
        '',                     // 虛擬路徑為空表示根目錄
        `${process.env.PUBLIC_URL}/`  // 文件基礎(chǔ)路徑
      );

      // 5. 從虛擬文件系統(tǒng)加載Word文件到文檔實(shí)例
      doc.LoadFromFile(inputFileName);

      // 6. 將文檔保存為HTML格式到虛擬文件系統(tǒng)
      doc.SaveToFile({
        fileName: outputFileName,
        fileFormat: wasmModule.FileFormat.Html
      });

      // 7. 從虛擬文件系統(tǒng)讀取轉(zhuǎn)換后的HTML文件內(nèi)容
      const modifiedFileArray = wasmModule.FS.readFile(outputFileName);

      // 8. 將二進(jìn)制數(shù)組轉(zhuǎn)換為Blob對(duì)象（二進(jìn)制大對(duì)象），便于創(chuàng)建下載鏈接
      // 指定MIME類型為text/html，確保瀏覽器正確識(shí)別
      const modifiedFile = new Blob([modifiedFileArray], { type: 'text/html' });

      // 9. 創(chuàng)建Blob對(duì)象的臨時(shí)URL，用于下載
      const url = URL.createObjectURL(modifiedFile);

      // 10. 創(chuàng)建a標(biāo)簽觸發(fā)文件下載
      const a = document.createElement("a");
      a.href = url;          // 設(shè)置下載鏈接
      a.download = outputFileName;  // 設(shè)置下載文件名
      document.body.appendChild(a); // 將a標(biāo)簽添加到頁面
      a.click();             // 模擬點(diǎn)擊觸發(fā)下載
      document.body.removeChild(a); // 下載后移除a標(biāo)簽
      URL.revokeObjectURL(url); // 釋放臨時(shí)URL，避免內(nèi)存泄漏

      // 11. 釋放文檔資源，避免內(nèi)存占用
      doc.Dispose();
    }
  };

  // 組件渲染部分：展示頁面UI
return (
    <div style={{ maxWidth: '800px', margin: '40px auto', textAlign: 'center' }}>
      <h2 style={{ color: '#2c3e50' }}>React Word → HTML 轉(zhuǎn)換器</h2>
      <p style={{ color: '#7f8c8d', margin: '20px 0' }}>
        支持.doc/.docx格式轉(zhuǎn)換，點(diǎn)擊下方按鈕開始轉(zhuǎn)換
      </p>
      <button
        onClick={handleWordToHtml}
        disabled={!wasmModule || converting} // WASM未加載或轉(zhuǎn)換中時(shí)禁用按鈕
        style={{
          padding: '12px 30px',
          fontSize: '16px',
          backgroundColor: !wasmModule || converting ? '#bdc3c7' : '#3498db',
          color: '#fff',
          border: 'none',
          borderRadius: '4px',
          cursor: !wasmModule || converting ? 'not-allowed' : 'pointer'
        }}
      >
        {converting ? '轉(zhuǎn)換中...' : '開始轉(zhuǎn)換'}
      </button>
    </div>
  );
};

// 導(dǎo)出App組件作為默認(rèn)導(dǎo)出
export default App;

// 方案1：外部CSS（推薦，便于樣式維護(hù)）
doc.HtmlExportOptions.CssStyleSheetFileName = 'converted-style.css'; // 外部CSS文件名
doc.HtmlExportOptions.CssStyleSheetType = wasmModule.CssStyleSheetType.External; // 外部樣式表

// 方案2：嵌入CSS（HTML文件獨(dú)立完整，無外部依賴）
// doc.HtmlExportOptions.CssStyleSheetType = wasmModule.CssStyleSheetType.Internal;

// 方案1：圖片獨(dú)立存儲(chǔ)（減少HTML體積，需確保圖片路徑可訪問）
doc.HtmlExportOptions.ImageEmbedded = false; // 不嵌入圖片
doc.HtmlExportOptions.ImagesPath = 'word-images/'; // 圖片存儲(chǔ)目錄（相對(duì)HTML文件路徑）

// 方案2：圖片base64嵌入（HTML文件獨(dú)立，無需額外管理圖片文件）
// doc.HtmlExportOptions.ImageEmbedded = true;

// 表單字段導(dǎo)出為純文本（用戶無法編輯，僅展示內(nèi)容）
doc.HtmlExportOptions.IsTextInputFormFieldAsText = true;

// （可選）若需保留表單交互功能，需額外處理（如轉(zhuǎn)換為HTML原生表單元素）
// doc.HtmlExportOptions.ExportFormFields = true;