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

• 在 React 中將 PDF 轉(zhuǎn)換為 HTML
• 自定義 PDF 到 HTML 轉(zhuǎn)換設(shè)置
• 在 React 中將 PDF 轉(zhuǎn)換為 HTML 流

安裝 Spire.PDF for JavaScript

要在 React 應(yīng)用程序中實(shí)現(xiàn) PDF 轉(zhuǎn) HTML，首先需要下載 Spire.PDF for JavaScript，或者使用  進(jìn)行安裝：

npm i spire.pdf

在 React 中將 PDF 轉(zhuǎn)換為 HTML

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

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

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

function App() {

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

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

        // 當(dāng) WASM 運(yùn)行時(shí)初始化完成后，設(shè)置 wasmModule 狀態(tài)
        Module.onRuntimeInitialized = () => {
          setWasmModule(spirepdf);
        };
      } catch (err) {
        // 記錄加載過程中發(fā)生的錯(cuò)誤
        console.error('WASM 模塊加載失敗:', err);
      }
    };

    // 創(chuàng)建 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);

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

  // PDF 轉(zhuǎn) HTML 方法
  const ConvertPdfToHTML = async () => {
    if (wasmModule) {
      // 加載字體文件到虛擬文件系統(tǒng)（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}/`);

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

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

      // 定義輸出文件名
      const outputFileName = 'Pdf轉(zhuǎn)Html.html';

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

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

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

      // 創(chuàng)建 Blob 的 URL 并觸發(fā)下載
      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 轉(zhuǎn)換為 HTML</h1>
      <button onClick={ConvertPdfToHTML} disabled={!wasmModule}>
        轉(zhuǎn)換
      </button>
    </div>
  );
}

export default App;

React 應(yīng)用程序編譯成功后，將在默認(rèn)網(wǎng)頁瀏覽器中打開，通常是 //localhost:3000。點(diǎn)擊“轉(zhuǎn)換”按鈕即可將 PDF 文件轉(zhuǎn)換為 HTML。

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

自定義 PDF 到 HTML 轉(zhuǎn)換設(shè)置

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

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

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

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

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

        // 當(dāng) WASM 運(yùn)行時(shí)初始化完成時(shí)，設(shè)置 wasmModule 狀態(tài)
        Module.onRuntimeInitialized = () => {
          setWasmModule(spirepdf);
        };
      } catch (err) {
        // 記錄加載過程中發(fā)生的錯(cuò)誤
        console.error('加載 WASM 模塊失敗:', err);
      }
    };

    // 創(chuàng)建 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);

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

  // 從虛擬文件系統(tǒng) (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 轉(zhuǎn) HTML 方法
  const ConvertPdfToHTML = async () => {
    if (wasmModule) {
      // 將所需的字體文件加載到虛擬文件系統(tǒng) (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}/`);

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

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

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

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

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

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

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

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

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

export default App;

在 React 中將 PDF 轉(zhuǎn)換為 HTML 流

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

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

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

function App() {

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

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

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

        // 當(dāng)運(yùn)行時(shí)初始化完成時(shí)，設(shè)置 wasmModule 狀態(tài)
        Module.onRuntimeInitialized = () => {
          setWasmModule(spirepdf);
        };
      } catch (err) {

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

    // 創(chuàng)建 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);

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

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

       // 將所需的字體文件加載到虛擬文件系統(tǒng)（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}/`);

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

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

      // 定義輸出文件名
      const outputFileName = 'Pdf轉(zhuǎn)Html流.html';
      // 創(chuàng)建一個(gè)新的內(nèi)存流
      let ms = wasmModule.Stream.CreateByFile(outputFileName);

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

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

      // 讀取保存的文件并將其轉(zhuǎn)換為 Blob 對(duì)象
      const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
      const modifiedFile = new Blob([modifiedFileArray], { type: 'text/html' });
      
      // 為 Blob 創(chuàng)建一個(gè) 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 轉(zhuǎn)換為 HTML
      
        轉(zhuǎn)換
      
    
  );
}

export default App;

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

關(guān)于慧都科技：

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

歡迎下載|體驗(yàn)更多E-iceblue產(chǎn)品