翻譯|使用教程|編輯:吉煒煒|2025-03-25 10:34:37.767|閱讀 123 次
概述:在 Web 環(huán)境中,將 PDF 轉(zhuǎn)換為 HTML 有助于提升內(nèi)容的可訪問性和交互性。本文將介紹如何在 React 中使用 JavaScript 和 Spire.PDF for JavaScript 庫將 PDF 轉(zhuǎn)換為 HTML。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
在 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 應(yīng)用程序中實(shí)現(xiàn) PDF 轉(zhuǎn) HTML,首先需要下載 Spire.PDF for JavaScript,或者使用 進(jìn)行安裝:
npm i spire.pdf安裝完成后,將 Spire.Pdf.Base.js 和 Spire.Pdf.Base.wasm 文件復(fù)制到項(xiàng)目的 public 文件夾中。此外,為確保文本的正確呈現(xiàn),還需要添加所需的字體文件。
開發(fā)者可以使用 Spire.PDF for JavaScript 提供的 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 文件:
開發(fā)者可以使用 PdfDocument.ConvertOptions.SetPdfToHtmlOptions() 方法來自定義 PDF 轉(zhuǎn) HTML 過程中的一些設(shè)置。例如,可以選擇是否在 HTML 中嵌入 SVG 或圖片,以及設(shè)置每個(gè) HTML 文件包含的最大頁數(shù)。具體步驟如下:
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;
Spire.PDF for JavaScript 還支持使用 PdfDocument.SaveToStream() 方法將 PDF 轉(zhuǎn)換為 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)品
獲取更多信息請(qǐng)咨詢 ;技術(shù)交流Q群(767755948)
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)