PDF.js 由 mozilla 出品基于浏览器 PDF 文档浏览插件

Question

PDF.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持，对浏览器的支持性好，目前的火狐浏览器对 PDF 文档预览就是这用的这个插件。

PDF.js 是社区驱动的，由 Mozilla 支持。我们的目标是创建一个通用的、基于Web标准的平台来解析和呈现PDF。

开始使用

下载 PDF.js 前请花点时间了解 PDF.js 项目。

Core

核心层是二进制PDF被解析和解释。该层是所有后续层的基础。这里没有记录它，因为直接使用它被认为是一种高级用法，并且API很可能会改变。有关使用核心层的示例，请参阅PDF对象浏览器。

Display

显示层采用了核心层，并公开了更易于使用的内容。API以呈现PDF并从文档中获取其他信息。这API是版本号所基于的。

Viewer

查看器构建在显示层上，是 UI 为 PDF Firefox 中的查看器和项目中的其他浏览器扩展。这可能是一个很好的起点，建立你自己的观众。但是，我们确实会问，如果您打算将查看器嵌入到您自己的站点中，那么它不仅仅是一个未经修改的版本。请重新剥去它或在它的基础上。

下载安装

Prebuilt

• 稳定版：https://github.com/mozilla/pdf.js/releases/download/v2.5.207/pdfjs-2.5.207-dist.zip
• Beta 版：https://github.com/mozilla/pdf.js/releases/download/v2.6.347/pdfjs-2.6.347-dist.zip

Prebuilt (ES5-compatible)

• 稳定版：https://github.com/mozilla/pdf.js/releases/download/v2.5.207/pdfjs-2.5.207-es5-dist.zip
• Beta 版：https://github.com/mozilla/pdf.js/releases/download/v2.6.347/pdfjs-2.6.347-es5-dist.zip

源代码

要获得当前代码的本地副本，请使用 git 克隆它：

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

通过 CDN

PDF.js 托管在几个免费的 CDN：

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

文件布局概述

请注意，我们只提到最相关的文件和 文件夹。

预制

├── build/
│   ├── pdf.js                             - display layer
│   ├── pdf.js.map                         - display layer's source map
│   ├── pdf.worker.js                      - core layer
│   └── pdf.worker.js.map                  - core layer's source map
├── web/
│   ├── cmaps/                             - character maps (required by core)
│   ├── compressed.tracemonkey-pldi-09.pdf - PDF file for testing purposes
│   ├── debugger.js                        - helpful debugging features
│   ├── images/                            - images for the viewer and annotation icons
│   ├── locale/                            - translation files
│   ├── viewer.css                         - viewer style sheet
│   ├── viewer.html                        - viewer layout
│   ├── viewer.js                          - viewer layer
│   └── viewer.js.map                      - viewer layer's source map
└── LICENSE

来源

├── docs/                                  - website source code
├── examples/                              - simple usage examples
├── extensions/                            - browser extension source code
├── external/                              - third party code
├── l10n/                                  - translation files
├── src/
│   ├── core/                              - core layer
│   ├── display/                           - display layer
│   ├── shared/                            - shared code between the core and display layers
│   ├── interfaces.js                      - interface definitions for the core/display layers
│   ├── pdf.*.js                           - wrapper files for bundling
│   └── worker_loader.js                   - used for developer builds to load worker files
├── test/                                  - unit, font and reference tests
├── web/                                   - viewer layer
├── LICENSE
├── README.md
├── gulpfile.js                            - build scripts/logic
├── package-lock.json                      - pinned dependency versions
└── package.json                           - package definition and dependencies

尝试查看器

使用预构建或源代码版本，打开 web/viewer.html 在浏览器和测试pdf应该加载。注意：浏览文件不支持 file:// 协议，因此请使用服务器。如果使用的是源生成并拥有节点，则可以运行gulp server。

使用方法

PDF.js在很大程度上依赖于 Promise，如果 Promise 对你来说是新的，建议你在继续之前先熟悉它们。

本教程展示了如何PDF.js可以用作Web浏览器中的库。examples/ 提供了更多示例，包括在 Node.js 中的用法。

Document

对象结构 PDF.js 松散地遵循实际的结构。在顶层有一个文档对象。可以从文档中获取更多信息和各个页面。为了得到 Document：

pdfjsLib.getDocument('helloworld.pdf')

记住，尽管 PDF.js 使用 Promise，上面的内容将返回 PDFDocumentLoadingTask 实例，该实例具有 promise 属性，该属性与文档一起解析对象。

var loadingTask = pdfjsLib.getDocument('helloworld.pdf');
loadingTask.promise.then(function(pdf) {
  // you can now use *pdf* here
});

Page

既然我们有了文档，我们就可以得到一页了。再一次，这使用 Promise。

pdf.getPage(1).then(function(page) {
  // you can now use *page* here
});

显示页面

每个 PDF 页面有自己的视图端口，它定义大小，以像素为单位，72 dpi，和初始旋转。默认情况下，视图端口将缩放到PDF，但是可以通过修改视口来改变这一点。在创建视图端口时，还将创建一个初始转换矩阵，该矩阵将考虑到所需的尺度、旋转，并转换坐标系，PDF文档的左下角，而画布 0，0 是左上角。

var scale = 1.5;
var viewport = page.getViewport({ scale: scale, });

var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;

var renderContext = {
  canvasContext: context,
  viewport: viewport
};
page.render(renderContext);

或者如果希望画布呈现到某个像素大小，则可以执行如下代码：

var desiredWidth = 100;
var viewport = page.getViewport({ scale: 1, });
var scale = desiredWidth / viewport.width;
var scaledViewport = page.getViewport({ scale: scale, });

相关链接

• Github 地址：https://github.com/mozilla/pdf.js