本文目录

1. 首先，我们将探索一些流行的 PDF 包，用于 JavaScript 中与 PDF 相关的工作。然后，我们将对它们进行比较，找到适合我们要求的最佳软件包。

2. 接下来，我们将加载一个现有的 PDF，并从中提取一些页面。提取的页面将组成一个新的 PDF 文档。

3. 然后，我们将在浏览器中渲染新的 PDF（我们在第二步中制作的）。

4. 最后，我们将下载新的 PDF 文件供以后使用。

用于 JavaScript 的 PDF 库

我发现 JavaScript 中的 PDF 库主要有两种类型。一种是用于 PDF 渲染生成，另一种是用于 PDF 操作（或修改）。我在搜索了一个多小时后发现了一堆 PDF 库，这些是我最好的选择。

这里列出的所有软件包都是免费的、开源的软件包。你可以在 npm 注册表中找到所有这些包。

pdfjs

该软件包由 Firefox 网络浏览器背后的公司 Mozilla 制作。 pdfjs 是一个基于 Web 标准的解析和呈现 PDF 的平台。
当您在 Firefox 中查看 PDF 时，PDF 查看器是使用此 pdfjs 包制作的。

这个包的核心优势是在网页上进行 PDF 渲染。其他的 PDF 修改功能在这个包里是非常有限的。如果你想为你的网站制作一个自定义的 PDF 浏览器，这可能是你正在寻找的软件包。

pdfjs 有一个非常简单的 API。他们有很多教程可以让你开始使用这个库。如果你还不相信，可以使用这个库一段时间，你一定会爱上它的。

pdf-lib

与之前的 pdfjs 包不同，pdf-lib 主要用于 PDF 的创建和操作。你可以根据你的需要用这个包动态地生成一个新的 PDF 文档。

这个包对修改现有文档有强大的支持。你可以用这个库做很多 PDF 的修改。例如，你可以做 PDF 的分割和合并，你可以提取一个页面，注释一个 PDF 文档，添加一个大纲，以及更多你能想象的事情。

它只有 JavaScript 作为一个依赖项。所以，它可以运行在任何有 JavaScript 运行时间的设备上。浏览器、Nodejs、Deno 和 React Native 都得到良好的支持。如果能在设备上安装 JavaScript，那么这个库就肯定能工作。

pdf-lib 的主要缺点是，它没有强大的渲染支持。如果你想用这个库做一个漂亮的 PDF 浏览用户界面，那么 pdf-lib 不是你的正确选择。在这种情况下，你应该使用 pdfjs 来代替。

pdfjs #2

如果你认为我在重复自己的话（跟 Mozilla 维护的 pdfjs 不一样），那么我没有。这是一个用于创建 PDF 文档的 JavaScript 库。它有一个非常简单的 API 可以使用。

我们之前讨论过的 pdfjs 库在用户界面上有非常强大的渲染支持，但它缺乏 PDF 创建和修改功能。

但这个库是以创建 PDF 为目的而建立的。它有一个非常简单的 API，对初学者很友好。你可以将它与 pdf-lib 包进行比较。

这个 pdfjs 库的主要缺点是，对现有文件的修改支持仍处于测试阶段。它并不是很稳定，而且仍在进行中。

如果你的主要关注点是 PDF 修改（例如，页面提取、合并、拆分、注释等），那么这个库可能不适合你。

如果贡献者能够进行维护，那么这可能是对 JavaScript 来说最好的 PDF 包。

js-pdf

与上面列出的所有 PDF 包不同，这个库是一个完整的野兽。你可以用这个库做任何与 PDF 有关的工作。这就像一个万能的库。如果你想要一些复杂的 PDF 相关的东西，那么这个库可以做到。

但在 JavaScript 中还有更好的包，它们对个别任务非常好。例如，pdfjs 是一个比 js-pdf 更好的 PDF 渲染器，而 pdf-lib 比 js-pdf 有更好的修改支持。

这里我说的不是实际性能或其他类型的指标，我说的是开发者的体验。我发现它的 API 不是很直观。对于一个初学者来说，第一眼就会感到不知所措。不过，这是我的看法，也是我使用它时的体验

PDF 生成是这个库的主要优势。你可以用你的任何设计来生成任何类型的 PDF。这个软件包将为你完成所有繁重的工作。如果你有经验，那么这可能是你的最佳选择。

react-pdf

顾名思义，这个库是专门针对 React 生态系统的。其用法非常具有 React 风格。你可以用它类似 JSX 的语法轻松创建一个文档。

你可以用简单的 React 组件创建和显示一个 PDF 文档。但功能非常有限。这个库主要用于生成 PDF。

如果你的目标是向用户展示一个 PDF，那么你可以使用这个包。作为一个 React 爱好者，你会喜欢这个库。看看他们的游乐场，花些时间来使用这个包。这样你就会知道你是否需要这个库。

为什么我们要在本教程中使用 pdf-lib？

在上面提到的所有这些 PDF 库中，我将在本文中使用 pdf-lib。因为我们要分割和合并 PDF 页面，并在浏览器中渲染它们，pdf-lib 似乎是这种情况下的最佳选择。

而且，pdf-lib 有相当简单的 API 可以使用，所有这些 API 都有很好的文档。如果你使用 TypeScript，你还可以获得类型推导，这非常有帮助。

最后但同样重要的是，他们的例子非常好。你可以在几分钟内启动并运行。所以我喜欢这个库，因为它适合我的使用情况。

如何在 JavaScript 中读取本地 PDF 文件

在对我们的 PDF 文档进行任何操作之前，我们必须从用户那里读取到该文档。在浏览器中读取任何文件都可以通过FileReader web API 来处理。

首先，我们要做一个文件输入按钮，然后用FileReader网络 API 处理上传的文件。

由于 Filereader API 是用回调工作的，我发现 async/await 要简明得多，也更容易操作。所以让我们做一个辅助函数，把 Filereader 的回调修改成 async/await。

现在，当用户使上传文件完成时，我们监听文件输入事件，然后使用这个readFileAsync函数读取文件。

这个逻辑的实现在代码中看起来像这样:

如何提取 PDF 页面

到此为止，我们的 PDF 被上传并转换为 JavaScript ArrayBuffer。由于我们正在从 PDF 中提取一系列的页面，我们想要一个包含 PDF 中这些页码的数组。

在 JavaScript 中生成一个自然数的数组并不难。所以我们做了一个名为range()的函数来生成我们想要的所有索引。

我们必须提供起始页数和结束页数，然后这个range()函数就可以生成一个带有适当页数的数组。

在这里，我们在最后加上 -1。你知道原因是什么吗？在编程中，索引是从 0 开始的，而不是 1。所以我们必须从每一个页码中扣除-1，以获得我们想要的行为。

现在让我们开始本文的主要部分：提取。在做任何工作之前，请导入 pdf-lib 库。

首先，我们加载我们从之前的onFileSelected'函数得到的PDFArrayBuffer'。然后我们把ArrayBuffer加载到PDFDocument.load(arraybuffer)函数中。这就是我们的用户提供的 PDF。为了方便起见，我们称它为pdfSrcDoc。

现在我们将创建一个新的 PDF。所有从用户提供的文档中提取的 PDF 页面都被合并到新文档中。我们使用PDFDocument.create()函数来做这件事。为了便于使用，我们称它为pdfNewDoc。

之后，我们使用copyPages()函数将我们想要的页面从pdfSrcDoc复制到pdfNewDoc。然后我们将复制的页面添加到`pdfNewDoc'中。

要保存这些变化，运行pdfNewDoc.save()。让我们创建一个名为extractPdfPage()的函数来重用这个逻辑。函数中的代码将看起来像这样:

我们从extractPdfPage()函数返回一个Uint8Array。

如何在浏览器中渲染 PDF

到目前为止，我们有一个修改过的 PDF 的Uint8Array。为了在你的浏览器中呈现它，我们必须把它转换成一个 Blob。

然后我们将它做成一个 URL，并在一个 iframe 中呈现。

你也可以使用我上面提到的 pdfjs 库制作你的自定义 PDF 浏览器。但如果你不需要显示品牌和定制，浏览器的默认 PDF 查看器就可以达到这个目的。

现在你可以很容易地在一个 iframe 中渲染这个从 renderPdf() 函数返回的 docUrl。

完整的代码示例

我在本教程中使用 Next.js。如果你使用的是其他框架或 vanilla JavaScript，结果也会类似。下面是这个项目的所有代码:

现在你可以使用 PDF 查看器上的下载按钮保存生成的 PDF。

更多学习资料关注马哥教育  VX :Teemo--1