在 React 中使用 JavaScript 将 PDF 转换为 HTML

在 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 项目中集成 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。

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 格式。

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 天的临时许可证。

返回顶部