PDF.js 教程

1. 项目介绍

PDF.js 是一个由 Mozilla 社区开发的开源平台，用于解析和渲染 PDF 文件，它基于 Web 标准，旨在创建一个跨浏览器的通用解决方案。项目的目标是提供一个无需额外插件即可在现代Web浏览器中查看 PDF 的途径。其源码托管在 GitHub，并遵循 Apache 2.0 许可协议。

2. 项目快速启动

安装依赖

首先，确保已安装 Node.js 和 git。接下来，通过 git 克隆 PDF.js 仓库：

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

然后，使用 npm 安装构建工具和其他依赖：

$ npm install

运行示例

要运行本地示例，执行以下命令以启动服务器：

$ npx gulp serve

现在，可以在浏览器中打开以下地址来查看在线演示：

• 现代浏览器: http://localhost:8888/web/viewer.html
• 兼容旧版浏览器: http://localhost:8888/legacy/web/viewer.html

嵌入到自己的项目

要在你的 Web 应用程序中使用 PDF.js，请引入 pdf.js 和 pdf.worker.js（如果支持旧版浏览器则需包括 pdf.js-legacy）。这两个文件可以从构建目录获取：

<script src="build/generic/build/pdf.js"></script>
<!-- 只对老版本浏览器 -->
<script src="build/generic-legacy/build/pdf.js-legacy"></script>

<script>
  PDFJS.getDocument('path_to_your_pdf_file.pdf').then(function(pdfDocument) {
    // 使用 pdfDocument 对象进行操作
  });
</script>

构建自定义版本

如果你需要构建和定制 PDF.js，可以运行以下命令：

$ npx gulp generic   # 适用于现代浏览器
$ npx gulp generic-legacy   # 支持旧版浏览器

构建结果将保存在 build/generic/build/ 或 build/generic-legacy/build/ 目录下。

3. 应用案例和最佳实践

• 加载 PDF: 利用 PDFJS.getDocument(url) 加载 PDF 文档，并处理加载完成后的回调。
• 渲染页面: 使用 page.render() 方法将 PDF 页面渲染到指定的 <canvas> 元素上。
• 优化性能: 考虑使用预加载或懒加载策略，避免一次性加载所有页面。
• 错误处理: 在调用 PDF.js API 时，记得捕获可能的错误。

4. 典型生态项目

• PDF.js Viewer: 内置的浏览器端 PDF 查看器，具有基本的导航和注释功能。
• Firefox 浏览器集成: 自从 v19 版本起，Firefox 就集成了 PDF.js 用于原生显示 PDF。
• Chrome 扩展: 有一个官方的 Chrome 扩展，可在 Chrome 商店安装。

了解更多信息，请访问项目官方 GitHub 页面，那里提供了详细的文档、示例和贡献指南。