在 Web 环境中，将 PDF 转换为 HTML 有助于提升内容的可访问性和交互性。PDF 虽然因其稳定的版式和便捷的共享特性被广泛使用，但它在在线展示和交互方面存在一定局限。相比之下， HTML 具备更高的灵活性，使内容能够自适应不同设备，便于在网站和移动端流畅呈现。通过将 PDF 转换为 HTML，开发者不仅能提升搜索引擎可见性，还能简化内容编辑流程，优化用户体验。本文将介绍如何在 React 中使用 JavaScript 和 Spire.PDF for JavaScript 库将 PDF 转换为 HTML。
安装 Spire.PDF for JavaScript
要在 React 应用程序中实现 PDF 转 HTML，首先需要下载 Spire.PDF for JavaScript，或者使用 npm 进行安装：
npm i spire.pdf安装完成后，将 Spire.Pdf.Base.js 和 Spire.Pdf.Base.wasm 文件复制到项目的 public 文件夹中。此外，为确保文本的正确呈现，还需要添加所需的字体文件。
详细的安装和配置步骤，请参考此教程：如何在 React 项目中集成 Spire.PDF for JavaScript
在 React 中将 PDF 转换为 HTML
开发者可以使用 Spire.PDF for JavaScript 提供的 PdfDocument.SaveToFile() 方法，轻松将 PDF 文件转换为 HTML。具体步骤如下：
- 将所需的字体文件和 PDF 文件加载到虚拟文件系统（VFS）。
- 使用 wasmModule.PdfDocument.Create() 方法创建 PdfDocument 对象。
- 使用 PdfDocument.LoadFromFile() 方法加载 PDF 文件。
- 通过 PdfDocument.SaveToFile() 方法将 PDF 转换为 HTML 格式。
- JavaScript
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 应用程序编译成功后，将在默认网页浏览器中打开，通常是 http://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 格式。
- JavaScript
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 文件。
- JavaScript
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;申请临时 License
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
