开源 JavaScript PDF 查看器库

什么是 PDF.js？

PDF.js 是一个基于 JavaScript 和 HTML5 的开源 PDF 查看器库，由 Mozilla 开发，允许在浏览器中查看 PDF（便携式文档格式）文档。

PDF.js 支持以下几个功能：

• 渲染 PDF：您可以在网络浏览器中打开和查看、阅读或渲染 PDF 文档。
• 打印/保存 PDF：PDF.js 还允许从您最喜欢的网络浏览器打印或保存 PDF 文档。
• 演示模式：使用演示模式，您可以全屏显示 PDF 页面，并可以像演示幻灯片一样导航到每个页面。
• PDF 导航：PDF.js 提供更简单的导航控件，您可以使用它移动到下一页或上一页。您还可以通过输入页码快速跳转到所需页面。
• PDF 注释：您还可以通过在 PDF 页面上添加文本、图像或绘图来注释 PDF 文档。
• 旋转 PDF 页面：使用 PDF.js，您还可以顺时针或逆时针旋转 PDF 页面。
• 滚动 PDF：PDF.js 提供了很好的控制来水平或垂直滚动页面等。
• PDF 文档属性：最后但并非最不重要的一点是，您还可以使用 PDF.js 查看器在浏览器中查看 PDF 文档的属性。

GitHub 统计

姓名：
语言：
星星：
叉子：
执照：
存储库上次更新于

PDF.js 入门

有三种方法可以获取 PDF.js 并开始在您的 Web 项目中使用它。

1. 从源代码构建

您可以从 GitHub 克隆 PDF.js 存储库，并在安装 Node.js、gulp 和 PDF.js 依赖项后自行构建它，具体步骤如下：

git clone https://github.com/mozilla/pdf.js.git
cd pdf.js

https://nodejs.org/en/download

npm install -g gulp-cli

npm install

gulp server

2. 使用预先构建的发行版

PDF.js 还提供预构建的发行版以及源代码，您可以在 GitHub 上的 PDF.js 发行版 中找到这些源代码。您可以下载预构建的 PDF.js 库并开始使用它。

3. 通过 CDN 使用托管库

PDF.js 也托管在免费的 CDN 服务器上。下面分享一些链接：

• https://cdnjs.com/libraries/pdf.js
• https://www.jsdelivr.com/package/npm/pdfjs-dist
• https://unpkg.com/pdfjs-dist

运行 PDF.js 查看器

从 GitHub 下载并提取预构建的分发库后，您会发现两个文件夹：build 和 web。PDF.js 库文件位于 build 文件夹中，而 web 文件夹包含一个查看器项目，其中包含 viewer.html、viewer.css、viewer.js 和相关文件。如果您检查 viewer.html 代码，您会发现它引用了 build 文件夹中的 pdf.js 库以及其他相关的 css 和 js 文件。

让我们在浏览器中运行viewer.html来看一下PDF.js查看器是什么样子的：

渲染/查看 PDF 文档

要使用 PDF.js 查看器库在浏览器中简单地呈现或查看 PDF 文档，我们必须使用 script 标签将 PDF.js 库包含到我们的 HTML 文档头中，在 HTML 正文中添加 canvas，然后添加必要的 JavaScript 代码以使用 pdfjsLib 和承诺对象来处理 PDF 文档的异步加载和呈现。

上述代码只是在浏览器中加载 PDF 文档，没有任何用户界面或控件，如下所示：

在线演示

尝试这个功能齐全的在线 PDF.js 查看器演示来探索 PDF.js 库的所有功能。

结论

PDF.js 是一个免费的开源 JavaScrpit PDF 查看器库，拥有强大的社区。它为现代和旧版浏览器提供跨浏览器支持。是的，旧版浏览器上的用户体验可能与现代浏览器不同，但作为一个免费库，它仍然很好。它安全且可定制。功能有限，但作为 PDF 查看器，它效果很好。

PDF.js 提供了良好的 API 和架构来构建基于 Web 的 PDF 查看器。由于向查看器添加更多 UI 控件非常耗时，为了节省开发人员的时间，PDF.js 还提供了功能齐全、特性丰富的 PDF 查看器的源代码，您可以在 PDF.js 库分发包的 web 文件夹中找到该源代码（查看 viewer.html、viewer.js 和 viewer.css 等）。

类似产品