在 Web 環境中，將 PDF 轉換為 HTML 有助于提升內容的可訪問性和交互性。PDF 雖然因其穩定的版式和便捷的共享特性被廣泛使用，但它在在線展示和交互方面存在一定局限。相比之下， HTML 具備更高的靈活性，使內容能夠自適應不同設備，便于在網站和移動端流暢呈現。通過 將PDF 轉換為 HTML，開發者不僅能提升搜索引擎可見性，還能簡化內容編輯流程，優化用戶體驗。本文將介紹如何在 React 中使用 JavaScript 和 Spire.PDF for JavaScript 庫將 PDF 轉換為 HTML。

• 在 React 中將 PDF 轉換為 HTML
• 自定義 PDF 到 HTML 轉換設置
• 在 React 中將 PDF 轉換為 HTML 流

安裝 Spire.PDF for JavaScript

要在 React 應用程序中實現 PDF 轉 HTML，首先需要下載 Spire.PDF for JavaScript，或者使用  進行安裝：

npm i spire.pdf

在 React 中將 PDF 轉換為 HTML

開發者可以使用 Spire.PDF for JavaScript 提供的 PdfDocument.SaveToFile() 方法，輕松將 PDF 文件轉換為 HTML。具體步驟如下：

• 將所需的字體文件和 PDF 文件加載到虛擬文件系統（VFS）。
• 使用 wasmModule.PdfDocument.Create() 方法創建 PdfDocument 對象。
• 使用 PdfDocument.LoadFromFile() 方法加載 PDF 文件。
• 通過 PdfDocument.SaveToFile() 方法將 PDF 轉換為 HTML 格式。

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

function App() {

  // 存儲加載的 WASM 模塊
  const [wasmModule, setWasmModule] = useState(null);

  // 在組件掛載時加載 WASM 模塊
  useEffect(() => {
    const loadWasm = async () => {
      try {
        // 從全局 window 對象中獲取 Module 和 spirepdf
        const { Module, spirepdf } = window;

        // 當 WASM 運行時初始化完成后，設置 wasmModule 狀態
        Module.onRuntimeInitialized = () => {
          setWasmModule(spirepdf);
        };
      } catch (err) {
        // 記錄加載過程中發生的錯誤
        console.error('WASM 模塊加載失敗:', err);
      }
    };

    // 創建 script 元素以加載 WASM JavaScript 文件
    const script = document.createElement('script');
    script.src = `${process.env.PUBLIC_URL}/Spire.Pdf.Base.js`;
    script.onload = loadWasm;

    // 將 script 元素添加到文檔 body
    document.body.appendChild(script);

    // 組件卸載時清理 script 元素
    return () => {
      document.body.removeChild(script);
    };
  }, []); 

  // PDF 轉 HTML 方法
  const ConvertPdfToHTML = async () => {
    if (wasmModule) {
      // 加載字體文件到虛擬文件系統（VFS）
      await wasmModule.FetchFileToVFS('MSYH.TTC', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);

      // 加載輸入的 PDF 文件到 VFS
      let inputFileName = '趣味填詞故事.pdf';
      await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);

      // 創建新的 PDF 文檔對象
      const doc = wasmModule.PdfDocument.Create();

      // 加載 PDF 文件
      doc.LoadFromFile(inputFileName); 

      // 定義輸出文件名
      const outputFileName = 'Pdf轉Html.html';

      // 將 PDF 保存為 HTML
      doc.SaveToFile({fileName: outputFileName, fileFormat: wasmModule.FileFormat.HTML});

      // 釋放資源
      doc.Close();       
      doc.Dispose();

      // 讀取保存的 HTML 文件并轉換為 Blob 對象
      const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
      const modifiedFile = new Blob([modifiedFileArray], { type: 'text/html' });

      // 創建 Blob 的 URL 并觸發下載
      const url = URL.createObjectURL(modifiedFile);
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);
      a.click(); 
      document.body.removeChild(a); 
      URL.revokeObjectURL(url); 
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>在 React 中使用 JavaScript 將 PDF 轉換為 HTML</h1>
      <button onClick={ConvertPdfToHTML} disabled={!wasmModule}>
        轉換
      </button>
    </div>
  );
}

export default App;

React 應用程序編譯成功后，將在默認網頁瀏覽器中打開，通常是 //localhost:3000。點擊“轉換”按鈕即可將 PDF 文件轉換為 HTML。

下圖展示了本示例中的輸入 PDF 文件和轉換后的 HTML 文件：

自定義 PDF 到 HTML 轉換設置

開發者可以使用 PdfDocument.ConvertOptions.SetPdfToHtmlOptions() 方法來自定義 PDF 轉 HTML 過程中的一些設置。例如，可以選擇是否在 HTML 中嵌入 SVG 或圖片，以及設置每個 HTML 文件包含的最大頁數。具體步驟如下：

• 將所需的字體文件和 PDF 文件加載到虛擬文件系統（VFS）。
• 使用 wasmModule.PdfDocument.Create() 方法創建 PdfDocument 對象。
• 使用 PdfDocument.LoadFromFile() 方法加載 PDF 文件。
• 通過 PdfDocument.ConvertOptions.SetPdfToHtmlOptions() 方法自定義轉換選項。
• 使用 PdfDocument.SaveToFile() 方法將 PDF 保存為 HTML 格式。

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

function App() {
  // 存儲已加載的 WASM 模塊的狀態
  const [wasmModule, setWasmModule] = useState(null);

  // 在組件掛載時加載 WASM 模塊
  useEffect(() => {
    const loadWasm = async () => {
      try {
        // 從全局 window 對象中獲取 Module 和 spirepdf
        const { Module, spirepdf } = window;

        // 當 WASM 運行時初始化完成時，設置 wasmModule 狀態
        Module.onRuntimeInitialized = () => {
          setWasmModule(spirepdf);
        };
      } catch (err) {
        // 記錄加載過程中發生的錯誤
        console.error('加載 WASM 模塊失敗:', err);
      }
    };

    // 創建 script 元素以加載 WASM JavaScript 文件
    const script = document.createElement('script');
    script.src = `${process.env.PUBLIC_URL}/Spire.Pdf.Base.js`;
    script.onload = loadWasm;

    // 將 script 元素添加到文檔 body
    document.body.appendChild(script);

    // 組件卸載時清理 script 元素
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  // 從虛擬文件系統 (VFS) 下載文件的方法
  const downloadFileFromVFS = (fileName) => {
    const fileArray = wasmModule.FS.readFile(fileName);
    const fileBlob = new Blob([fileArray], { type: 'text/html' });
    const url = URL.createObjectURL(fileBlob);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  // PDF 轉 HTML 方法
  const ConvertPdfToHTML = async () => {
    if (wasmModule) {
      // 將所需的字體文件加載到虛擬文件系統 (VFS)
      await wasmModule.FetchFileToVFS('MSYH.TTC', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);

      // 將輸入 PDF 文件加載到 VFS
      let inputFileName = '趣味填詞故事.pdf';
      await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);

      // 創建新的 PDF 文檔對象
      const doc = wasmModule.PdfDocument.Create();

      // 加載 PDF 文件
      doc.LoadFromFile(inputFileName);
      const totalPages = doc.Pages.Count;

      // 自定義轉換設置
      doc.ConvertOptions.SetPdfToHtmlOptions({ useEmbeddedSvg: false, useEmbeddedImg: true, maxPageOneFile: 1 });

      // 定義輸出文件名
      const outputFileName = '自定義PDF到HTML轉換_result.html';

      // 將 PDF 保存為 HTML 文件
      doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.HTML });

      // 釋放資源
      doc.Close();
      doc.Dispose();

      // 記錄 PDF 的總頁數
      console.log(`總頁數: ${totalPages}`);

      // 下載所有生成的 HTML 文件
      for (let i = 1; i <= totalPages; i++) {
        const fileName = `自定義PDF到HTML轉換_result_${i}-${i}.html`;
        downloadFileFromVFS(fileName);
      }
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>在 React 中使用 JavaScript 將 PDF 轉換為 HTML</h1>
      <button onClick={ConvertPdfToHTML} disabled={!wasmModule}>
        轉換
      </button>
    </div>
  );
}

export default App;

在 React 中將 PDF 轉換為 HTML 流

Spire.PDF for JavaScript 還支持使用 PdfDocument.SaveToStream() 方法將 PDF 轉換為 HTML 流。具體步驟如下：

• 將所需的字體文件和輸入的 PDF 文件加載到虛擬文件系統（VFS）中。
• 使用 wasmModule.PdfDocument.Create() 方法創建 PdfDocument 對象。
• 使用 PdfDocument.LoadFromFile() 方法加載 PDF 文件。
• 使用 wasmModule.Stream.CreateByFile() 方法創建內存流。
• 使用 PdfDocument.SaveToStream() 方法將 PDF 文檔保存為 HTML 流。
• 使用 wasmModule.FS.writeFile() 方法將流的內容寫入 HTML 文件。

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

function App() {

  // 存儲已加載的 WASM 模塊的狀態
  const [wasmModule, setWasmModule] = useState(null);

  // 在組件掛載時加載 WASM 模塊
  useEffect(() => {
    const loadWasm = async () => {
      try {

        // 從全局 window 對象中訪問 Module 和 spirepdf
        const { Module, spirepdf } = window;

        // 當運行時初始化完成時，設置 wasmModule 狀態
        Module.onRuntimeInitialized = () => {
          setWasmModule(spirepdf);
        };
      } catch (err) {

        // 記錄加載過程中發生的錯誤
        console.error('加載 WASM 模塊失敗:', err);
      }
    };

    // 創建 script 元素以加載 WASM JavaScript 文件
    const script = document.createElement('script');
    script.src = `${process.env.PUBLIC_URL}/Spire.Pdf.Base.js`;
    script.onload = loadWasm;

    // 將 script 元素添加到文檔 body
    document.body.appendChild(script);

    // 組件卸載時清理 script 元素
    return () => {
      document.body.removeChild(script);
    };
  }, []); 

  // PDF 轉 HTML 方法
  const ConvertPdfToHTML = async () => {
    if (wasmModule) {

       // 將所需的字體文件加載到虛擬文件系統（VFS）
       await wasmModule.FetchFileToVFS('MSYH.TTC', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);

      // 將輸入 PDF 文件加載到 VFS
      let inputFileName = '趣味填詞故事.pdf';
      await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);

      // 創建新的PDF文檔對象
      const doc = wasmModule.PdfDocument.Create();

      // 加載 PDF 文件
      doc.LoadFromFile(inputFileName); 

      // 定義輸出文件名
      const outputFileName = 'Pdf轉Html流.html';
      // 創建一個新的內存流
      let ms = wasmModule.Stream.CreateByFile(outputFileName);

      // 將 PDF 文檔保存為 HTML 流
      doc.SaveToStream({stream: ms, fileformat: wasmModule.FileFormat.HTML});
      // 將內存流的內容寫入 HTML 文件
      wasmModule.FS.writeFile(outputFileName, ms.ToArray());

      // 釋放資源
      doc.Close();       
      doc.Dispose();

      // 讀取保存的文件并將其轉換為 Blob 對象
      const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
      const modifiedFile = new Blob([modifiedFileArray], { type: 'text/html' });
      
      // 為 Blob 創建一個 URL 并開始下載
      const url = URL.createObjectURL(modifiedFile);
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);
      a.click(); 
      document.body.removeChild(a); 
      URL.revokeObjectURL(url); 
    }
  };

  return (
    
      在 React 中使用 JavaScript 將 PDF 轉換為 HTML
      
        轉換
      
    
  );
}

export default App;

————————————————————————————————————————

關于慧都科技：

慧都科技是專注軟件工程、智能制造、石油工程三大行業的數字化解決方案服務商。在軟件工程領域，我們提供開發控件、研發管理、代碼開發、部署運維等軟件開發全鏈路所需的產品，提供正版授權采購、技術選型、個性化維保等服務，幫助客戶實現技術合規、降本增效與風險可控。慧都科技E-iceblue的官方授權代理商，提供E-iceblue系列產品免費試用，咨詢，正版銷售等于一體的專業化服務。E-iceblue是國產文檔處理領域的優秀產品，支持國產化信創，幫助企業高效構建文檔處理的應用程序。

歡迎下載|體驗更多E-iceblue產品