当前位置：首页 > wzjs >正文

excel可以制作网页吗商丘网站seo

wzjs 2025/8/5 17:40:58

excel可以制作网页吗,商丘网站seo,商城app开发价格表,易企秀网站开发在 Web 环境中，将 PDF 转换为 HTML 有助于提升内容的可访问性和交互性。PDF 虽然因其稳定的版式和便捷的共享特性被广泛使用，但它在在线展示和交互方面存在一定局限。相比之下， HTML 具备更高的灵活性，使内容能够自适应不同设备&a…

在 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 进行安装：

npm i spire.pdf

安装完成后，将 Spire.Pdf.Base.js 和 Spire.Pdf.Base.wasm 文件复制到项目的 public 文件夹中。此外，为确保文本的正确呈现，还需要添加所需的字体文件。

在 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 和 spirepdfconst { 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 元素添加到文档 bodydocument.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 文件到 VFSlet 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 保存为 HTMLdoc.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。

React 应用程序编译成功

下图展示了本示例中的输入 PDF 文件和转换后的 HTML 文件：

在 React 中将 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 和 spirepdfconst { 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 元素添加到文档 bodydocument.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 文件加载到 VFSlet 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 和 spirepdfconst { 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 元素添加到文档 bodydocument.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 文件加载到 VFSlet 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;

查看全文

http://www.dtcms.com/wzjs/230759.html