开源 JavaScript PDF 查看器库

什么是 PDF.js？

PDF.js 是由 Mozilla 开发的基于开源 JavaScript 和 HTML5 的 PDF 查看器库，允许在浏览器中查看 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 和网络。 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 文档标头中，添加 canvas 到 HTML 正文，然后添加必要的 JavaScript 代码以使用 pdfjsLib 和 Promise 对象来处理 PDF 文档的异步加载和呈现。

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

在线演示

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

结论

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

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

类似产品