拆分 PDF 文档是 Web 应用中的常见需求。例如，您可能需要将一份长报告分成多个单页文件、单独提取封面页，或将第一页与其余页面分开以便进一步处理。您无需将文件上传到服务器，而是可以直接在 React 应用中使用 JavaScript 执行这些操作。

Spire.PDF for JavaScript 使开发者能够在基于浏览器的应用中加载、操作和保存 PDF 文档。它通过 WebAssembly 和虚拟文件系统工作，允许在客户端处理 PDF 文件。

本文演示了如何在 React 中使用 Spire.PDF for JavaScript 通过 JavaScript 拆分 PDF 文档。

• 将 PDF 按页面拆分为独立的 PDF 文件
• 按页面范围将 PDF 拆分为单独的文件

在 React 项目中安装 Spire.PDF for JavaScript

在 React 项目的根目录下打开终端，并安装 spire.office 包：

npm i spire.office

安装完成后，将安装包中的以下运行时文件和文件夹复制到 React 项目的 public 文件夹中：

public/
├── _framework/
├── spire.pdf.js
├── Spire.Pdf.Wasm.zip
├── spire.common.js
└── Spire.Common.Wasm.zip

JavaScript 加载器、WebAssembly 资源和支持框架文件在应用运行时必须保持为可访问的静态资源。有关详细设置说明和确切集成流程，请参阅如何在 React 项目中集成 Spire.PDF for JavaScript。

在以下示例中，待拆分的 PDF 文件名为 input.pdf。请将此文件也放在 public 文件夹中，以便在 React 应用中加载。

public/
├── input.pdf
└── ...

在 JavaScript 中将 PDF 按页面拆分为独立文件

如果要将 PDF 文档拆分为多个单页 PDF 文件，可以使用 Split() 方法。此方法将原始 PDF 分隔成多个独立文档，并将每一页保存为一个新的 PDF 文件。

以下示例加载 input.pdf，逐页拆分，并在浏览器中下载生成的每个 PDF 文件。

import React, { useState, useEffect } from 'react';

function App() {
  const [wasmModule, setWasmModule] = useState(null);

  useEffect(() => {
    (async () => {
      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);
    })();
  }, []);

  const loadPdfToVfs = async (fileName) => {
    const publicUrl = process.env.PUBLIC_URL || '';
    const response = await fetch(`${publicUrl}/${fileName}`);
    const fileBytes = new Uint8Array(await response.arrayBuffer());
    window.dotnetRuntime.Module.FS.writeFile(fileName, fileBytes, { flags: 'w+' });
    return fileName;
  };

  const SplitPdf = async () => {
    const wasmModule = window.wasmModule?.spirepdf;
    if (!wasmModule) return;

    const inputFile = await loadPdfToVfs('input.pdf');

    const doc = new wasmModule.PdfDocument();
    doc.LoadFromFile(inputFile);

    const pageCount = doc.Pages.Count;
    const outFileName = 'SplitDocument_result-{0}.pdf';
    doc.Split(outFileName);

    for (let i = 0; i < pageCount; i++) {
      const splitFileName = `SplitDocument_result-${i}.pdf`;
      const fileArray = window.dotnetRuntime.Module.FS.readFile(splitFileName);
      const file = new Blob([fileArray], { type: 'application/pdf' });
      const url = URL.createObjectURL(file);
      const a = document.createElement('a');
      a.href = url;
      a.download = splitFileName;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Split PDF Documents in React</h1>
      <button onClick={SplitPdf} disabled={!wasmModule}>
        Split PDF
      </button>
    </div>
  );
}

export default App;

输出结果：

代码工作原理

该代码首先在 React 组件挂载时导入并初始化 Spire.PDF WebAssembly 模块。

const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.js`);

然后，loadPdfToVfs() 函数从 public 文件夹加载 input.pdf 并将其写入虚拟文件系统：

window.dotnetRuntime.Module.FS.writeFile(fileName, fileBytes, { flags: 'w+' });

加载 PDF 文件后，创建一个 PdfDocument 对象并打开源 PDF：

const doc = new wasmModule.PdfDocument();
doc.LoadFromFile(inputFile);

Split() 方法将 PDF 文档拆分为多个独立的 PDF 文件。输出文件名中的 {0} 占位符会被页码索引替换：

const outFileName = 'SplitDocument_result-{0}.pdf';
doc.Split(outFileName);

最后，从虚拟文件系统中读取生成的 PDF 文件，转换为 Blob 对象，并在浏览器中下载。

在 JavaScript 中按页面范围拆分 PDF

在某些情况下，您可能不想将每一页都拆分为单独的文件。相反，您可能希望将某一页提取为独立的 PDF，并将剩余页面保存为另一个 PDF。这可以通过创建新的 PdfDocument 对象并将源文档中的选定页面插入其中来实现。

以下示例将 input.pdf 拆分为两个文件：

• Split-1.pdf：包含第一页
• Split-2.pdf：包含剩余页面

import React, { useState, useEffect } from 'react';

function App() {
  const [wasmModule, setWasmModule] = useState(null);

  useEffect(() => {
    (async () => {
      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);
    })();
  }, []);

  const loadPdfToVfs = async (fileName) => {
    const publicUrl = process.env.PUBLIC_URL || '';
    const response = await fetch(`${publicUrl}/${fileName}`);
    const fileBytes = new Uint8Array(await response.arrayBuffer());
    window.dotnetRuntime.Module.FS.writeFile(fileName, fileBytes, { flags: 'w+' });
    return fileName;
  };

  const SplitPdf = async () => {
    const wasmModule = window.wasmModule?.spirepdf;
    if (!wasmModule) return;

    const inputFile = await loadPdfToVfs('input.pdf');

    const doc = new wasmModule.PdfDocument();
    doc.LoadFromFile(inputFile);

    const newDoc1 = new wasmModule.PdfDocument();
    const newDoc2 = new wasmModule.PdfDocument();

    newDoc1.InsertPage(doc, 0);
    newDoc2.InsertPageRange(doc, 1, doc.Pages.Count - 1);

    newDoc1.SaveToFile('Split-1.pdf');
    newDoc2.SaveToFile('Split-2.pdf');

    for (const splitFileName of ['Split-1.pdf', 'Split-2.pdf']) {
      const fileArray = window.dotnetRuntime.Module.FS.readFile(splitFileName);
      const file = new Blob([fileArray], { type: 'application/pdf' });
      const url = URL.createObjectURL(file);
      const a = document.createElement('a');
      a.href = url;
      a.download = splitFileName;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Split PDF Documents in React</h1>
      <button onClick={SplitPdf} disabled={!wasmModule}>
        Split PDF
      </button>
    </div>
  );
}

export default App;

输出结果：

代码工作原理

此示例同样首先将源 PDF 文件加载到虚拟文件系统中，并使用 PdfDocument 打开它。

const doc = new wasmModule.PdfDocument();
doc.LoadFromFile(inputFile);

然后，创建两个新的 PDF 文档：

const newDoc1 = new wasmModule.PdfDocument();
const newDoc2 = new wasmModule.PdfDocument();

将源 PDF 的第一页插入到 newDoc1 中：

newDoc1.InsertPage(doc, 0);

使用 InsertPageRange() 将剩余页面插入到 newDoc2 中：

newDoc2.InsertPageRange(doc, 1, doc.Pages.Count - 1);

此处页码索引从 0 开始。数字 1 表示原始 PDF 的第二页，doc.Pages.Count - 1 表示第一页之后的所有剩余页面。

插入选定页面后，保存两个新的 PDF 文档：

newDoc1.SaveToFile('Split-1.pdf');
newDoc2.SaveToFile('Split-2.pdf');

最后，从虚拟文件系统中读取两个输出文件并下载到本地计算机。

结论

本文演示了如何在 React 应用中使用 Spire.PDF for JavaScript 拆分 PDF 文档。使用 Split() 方法，您可以将 PDF 拆分为独立的单页文档。使用 InsertPage() 和 InsertPageRange()，您可以将特定页面或页面范围提取到新的 PDF 文件中。

这些方法对于构建基于浏览器的 PDF 工具、文档管理系统、在线文件处理应用以及其他需要在不进行服务器端处理的情况下拆分 PDF 的 React 应用非常有用。

常见问题解答

我可以在 React 中将 PDF 拆分为每页一个文件吗？

可以。您可以使用 Spire.PDF for JavaScript 提供的 Split() 方法将 PDF 文档拆分为独立的 PDF 文件。原始 PDF 的每一页都将保存为一个独立的 PDF 文件。

我可以只拆分 PDF 中的特定页面范围吗？

可以。您可以不拆分每一页，而是创建一个新的 PdfDocument 对象，并使用 InsertPage() 或 InsertPageRange() 将源 PDF 中的选定页面复制到新的 PDF 文档中。

在 Spire.PDF for JavaScript 中页码索引是从 0 开始吗？

是的。页码索引从 0 开始。例如，页码索引 0 表示第一页，页码索引 1 表示第二页。使用 InsertPageRange() 时，请确保正确设置起始索引和页数。

我需要在 React 中拆分 PDF 文档时使用服务器吗？

不需要。使用 Spire.PDF for JavaScript，可以通过 WebAssembly 和虚拟文件系统在浏览器中加载、处理和保存 PDF。这使得无需将文件发送到服务器即可直接在 React 应用中拆分 PDF 文档成为可能。

获取临时许可证

如果您需要去除生成文档中的评估提示或解除功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。