PDF处理控件Spire.PDF系列教程：使用 JavaScript 在 React 中将 PDF 转换为 HTML

发布于：2025-03-26 ⋅ 阅读:(28) ⋅ 点赞:(0)

在 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 和 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 格式。
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 文件。
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;

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布