开源 JavaScript PDF 查看器库
尝试将此免费开源 JavaScript API 作为 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 文档的属性。
PDF.js 入门
可通过三种方式获取 PDF.js 并开始在您的 Web 项目中使用它。
1. 从源代码构建
您可以从 GitHub 克隆 PDF.js 存储库,并在安装 Node.js, gulp和 PDF.js 依赖项,请按照以下步骤操作:
在本地计算机上克隆 PDF.js git 存储库并切换到 pdf.js 文件夹
git clone https://github.com/mozilla/pdf.js.git
cd pdf.js
安装 Node.js
https://nodejs.org/en/download
全局安装gulp包
npm install -g gulp-cli
安装 PDF.js 依赖项
npm install
运行 gulp 服务器并在浏览器中打开查看器 http://localhost:8888/web/viewer.html
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 文件夹中。