在 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.office下载的产品包整合了 Spire.Doc for JavaScript，Spire.XLS for JavaScript，Spire.PDF for JavaScript，Spire.Presentation for JavaScript，使用 Spire.PDF for JavaScript 的功能需将相应的 spire.pdf.js，Spire.Pdf.Wasm.zip，spire.common.js，Spire.Common.Wasm.zip，_framework 文件复制到项目的 public 文件夹中。同时为了确保文本渲染，相关使用字体文件可自定义路径添加。以下示例中，字体添加路径为：public\static\font。
详细的安装和配置步骤，请参考此教程：如何在 React 项目中集成 Spire.PDF for JavaScript
在 React 中将 PDF 转换为 HTML
开发者可以使用 Spire.PDF for JavaScript 提供的 PdfDocument.SaveToFile() 方法，轻松将 PDF 文件转换为 HTML。具体步骤如下：
- 将所需的字体文件和 PDF 文件加载到虚拟文件系统（VFS）。
- 使用 wasmModule.PdfDocument() 方法创建 PdfDocument 对象。
- 使用 PdfDocument.LoadFromFile() 方法加载 PDF 文件。
- 通过 PdfDocument.SaveToFile() 方法将 PDF 转换为 HTML 格式。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
const [wasmModule, setWasmModule] = useState(null);
useEffect(() => {
(async () => {
try {
const publicUrl = process.env.PUBLIC_URL || '';
const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.js`);
const rawModule = spireModule.default || spireModule;
window.wasmModule = typeof rawModule === 'function'
? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
: rawModule;
setWasmModule(window.wasmModule);
} catch (error) {
console.error('spire.pdf.js:加载失败', error);
}
})();
}, []);
const ConvertPdfToHTML = async () => {
// 获取WASM模块
const wasmModule = window.wasmModule.spirepdf;
if (wasmModule) {
// 加载字体文件到虚拟文件系统（VFS）
await window.spire.FetchFileToVFS("MSYH.TTC", "/Library/Fonts/", `${process.env.PUBLIC_URL}/`);
// 要转换的PDF文件名
let inputFileName = "趣味填词故事.pdf";
// 将PDF文件加载到虚拟文件系统(VFS)
await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
// 创建PDF文档对象
let doc = new wasmModule.PdfDocument();
// 加载PDF文件
doc.LoadFromFile(inputFileName);
// 定义输出文件名
const outputFileName = "Pdf转Html.html";
// 将PDF保存为HTML格式
doc.SaveToFile(outputFileName);
// 关闭文档，释放资源
doc.Close();
// 读取保存的HTML文件，转换为Blob对象
const modifiedFileArray = window.dotnetRuntime.Module.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}>
转换
</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() 方法创建 PdfDocument 对象。
- 使用 PdfDocument.LoadFromFile() 方法加载 PDF 文件。
- 通过 PdfDocument.ConvertOptions.SetPdfToHtmlOptions() 方法自定义转换选项。
- 使用 PdfDocument.SaveToFile() 方法将 PDF 保存为 HTML 格式。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
const [wasmModule, setWasmModule] = useState(null);
useEffect(() => {
(async () => {
try {
const publicUrl = process.env.PUBLIC_URL || '';
const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.js`);
const rawModule = spireModule.default || spireModule;
window.wasmModule = typeof rawModule === 'function'
? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
: rawModule;
setWasmModule(window.wasmModule);
} catch (error) {
console.error('spire.pdf.js:加载失败', error);
}
})();
}, []);
// 从虚拟文件系统 (VFS) 下载文件的方法
const downloadFileFromVFS = (fileName) => {
const fileArray = window.dotnetRuntime.Module.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);
};
const ConvertPdfToHTML = async () => {
// 获取WASM模块
const wasmModule = window.wasmModule.spirepdf;
if (wasmModule) {
// 将字体文件加载到虚拟文件系统(VFS)
await window.spire.FetchFileToVFS("MSYH.TTC", "/Library/Fonts/", `${process.env.PUBLIC_URL}static/font/`);
// 要转换的PDF文件名
let inputFileName = ""趣味填词故事.pdf"";
// 将PDF文件加载到虚拟文件系统(VFS)
await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
// 创建PDF文档对象
let doc = new wasmModule.PdfDocument();
// 加载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}>
转换
</button>
</div>
);
}
export default App;在 React 中将 PDF 转换为 HTML 流
Spire.PDF for JavaScript 还支持使用 PdfDocument.SaveToStream() 方法将 PDF 转换为 HTML 流。具体步骤如下：
- 将所需的字体文件和输入的 PDF 文件加载到虚拟文件系统（VFS）中。
- 使用 wasmModule.PdfDocument() 方法创建 PdfDocument 对象。
- 使用 PdfDocument.LoadFromFile() 方法加载 PDF 文件。
- 使用 wasmModule.Stream() 方法创建内存流。
- 使用 PdfDocument.SaveToStream() 方法将 PDF 文档保存为 HTML 流。
- 使用 wasmModule.FS.writeFile() 方法将流的内容写入 HTML 文件。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
const [wasmModule, setWasmModule] = useState(null);
useEffect(() => {
(async () => {
try {
const publicUrl = process.env.PUBLIC_URL || '';
const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.js`);
const rawModule = spireModule.default || spireModule;
window.wasmModule = typeof rawModule === 'function'
? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
: rawModule;
setWasmModule(window.wasmModule);
} catch (error) {
console.error('spire.pdf.js:加载失败', error);
}
})();
}, []);
const ConvertPdfToHTML = async () => {
// 获取WASM模块
const wasmModule = window.wasmModule.spirepdf;
if (wasmModule) {
await window.spire.FetchFileToVFS("MSYH.TTC", "/Library/Fonts/", `${process.env.PUBLIC_URL}/`);
// 要转换的PDF文件名
let inputFileName = "趣味填词故事.pdf";
// 将PDF文件加载到虚拟文件系统(VFS)
await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
// 创建PDF文档对象
let doc = new wasmModule.PdfDocument();
// 加载PDF文件
doc.LoadFromFile(inputFileName);
/// 定义输出文件名
const outputFileName = 'Pdf转Html流.html';
// 创建一个新的内存流
let ms = new wasmModule.Stream();
// 将文件按流保存为html
doc.SaveToStream({stream: ms, fileformat: wasmModule.FileFormat.HTML});
ms.Save(outputFileName);
// 释放资源
ms.Close();
doc.Close();
// 读取保存的HTML文件，转换为Blob对象
const modifiedFileArray = window.dotnetRuntime.Module.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
<button onClick={ConvertPdfToHTML}>
转换
</button>
</div>
);
}
export default App;申请临时 License
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
