### PDF.js 学习资料详解
#### 一、PDF.js 概述
PDF.js 是一个由 Mozilla 开发的开源项目，旨在实现 PDF 文档在 Web 浏览器中的原生渲染，无需任何额外的插件支持。通过 HTML5 的强大功能，PDF.js 能够在各种现代浏览器中提供高质量的 PDF 渲染效果。
- **官方网站**: [http://mozilla.github.io/pdf.js/](http://mozilla.github.io/pdf.js/)
- **在线演示**: [http://mozilla.github.com/pdf.js/web/viewer.html](http://mozilla.github.com/pdf.js/web/viewer.html)
#### 二、PDF.js 目录结构
解压后的 PDF.js 文件夹结构通常如下：
- **build**：包含 PDF.js 的核心文件，包括压缩和未压缩的 JavaScript 文件。
- **web**：包含用于配置和显示 PDF 的文件，如 `viewer.html` 和 `viewer.js`。
- **viewer.html**：负责显示 PDF 文档的 HTML 页面。
- **viewer.js**：用于配置 PDF.js 行为的 JavaScript 文件。
#### 三、PDF.js 使用方法详解
##### 3.1 默认路径
`viewer.js` 中定义了一个变量 `var DEFAULT_URL`，它指定了解析 PDF 文件的默认路径。可以通过修改这个变量来改变默认打开的 PDF 文件。
```javascript
var DEFAULT_URL = 'path/to/your/default/file.pdf';
```
但是，在实际应用中，这种方式可能不够灵活，特别是当需要动态加载不同 PDF 文件时。
##### 3.2 地址栏传递路径
更常用的方法是通过 URL 参数传递 PDF 文件的路径。例如，可以在浏览器地址栏后加上 `?file=path/to/your/file.pdf` 来指定要打开的 PDF 文件。
示例 URL：
```
http://localhost:8080/pdfjs/web/viewer.html?file=test.pdf
```
这里 `test.pdf` 是相对于 `viewer.html` 的路径。如果 `test.pdf` 位于同一目录下，则可以直接使用文件名；如果在其他目录，则需要指定相对路径或绝对路径。
**注意**：这种方法不适合传递包含中文的路径，因为 URL 编码可能会导致问题。
#### 四、PDF.js 高级配置与功能
PDF.js 提供了许多高级配置选项，例如隐藏工具栏按钮、添加自定义功能等，这使得开发者可以根据具体需求定制 PDF 查看器的行为。
##### 4.1 隐藏按钮
如果希望用户无法下载 PDF 或者不允许他们跳转到其他页面，可以在 `viewer.html` 中隐藏或移除相应的按钮。
例如，要隐藏下载按钮，可以在 CSS 中添加以下代码：
```css
#toolbar .download a {
display: none;
}
```
##### 4.2 添加自定义功能
PDF.js 允许开发者通过扩展其 API 来添加自定义功能。例如，可以通过向 `viewer.js` 添加新的事件监听器来实现特定的功能，如自定义打印功能、保存 PDF 的当前状态等。
#### 五、PDF.js 的优势与应用场景
PDF.js 的主要优势在于其跨平台性、高性能和丰富的 API 支持。它可以应用于多种场景，如：
- 在线文档查看器
- 内嵌于 CMS 或 CRM 系统中的 PDF 查看器
- 移动应用中的 PDF 查看功能
- 云存储服务中的 PDF 预览功能
PDF.js 作为一个强大的 PDF 渲染引擎，不仅提供了基本的 PDF 显示功能，还具备高度的可定制性和扩展性，适用于各种 Web 应用场景。
