/**
* This is the main entry point for loading a PDF and interacting with it.
* NOTE: If a URL is used to fetch the PDF data a standard XMLHttpRequest(XHR)
* is used, which means it must follow the same origin rules that any XHR does
* e.g. No cross domain requests without CORS.
* @param {string|TypedArray|DocumentInitParameters|PDFDataRangeTransport} src
* Can be a url to where a PDF is located, a typed array (Uint8Array)
* already populated with data or parameter object.
* @returns {PDFDocumentLoadingTask}
function getDocument(src) {
// 省略实现
简单的说就是，getDocument 接口可以获取 src 指定的远程 PDF 文件，并返回一个 PDFDocumentLoadingTask 对象。后续所有对 PDF 内容的操作都可以通过改对象实现。
PDFDocumentLoadingTask
/**
* The loading task controls the operations required to load a PDF document
* (such as network requests) and provides a way to listen for completion,
* after which individual pages can be rendered.
// eslint-disable-next-line no-shadow
class PDFDocumentLoadingTask {
// 省略 n 行实现
* Promise for document loading task completion.
* @type {Promise}
get promise() {
return this._capability.promise;
PDFDocumentLoadingTask 是一个下载远程 PDF 文件的任务。它提供了一些监听方法，可以监听 PDF 文件的下载状态。通过 promise 可以获取到下载完成的 PDF 对象，它会生成并最终返回一个 PDFDocumentProxy 对象。
PDFDocumentProxy
/**
* Proxy to a PDFDocument in the worker thread. Also, contains commonly used
* properties that can be read synchronously.
class PDFDocumentProxy {
// 省略 n 行实现
* @type {number} Total number of pages the PDF contains.
get numPages() {
return this._pdfInfo.numPages;
* @param {number} pageNumber - The page number to get. The first page is 1.
* @returns {Promise} A promise that is resolved with a {@link PDFPageProxy}
* object.
getPage(pageNumber) {
return this._transport.getPage(pageNumber);
PDFDocumentProxy 是 PDF 文档代理类，我们可以通过它的 numPages 获取到文档的页面数量，通过 getPage 方法获取到指定页码的页面 PDFPageProxy 实例。
PDFPageProxy
/**
* Proxy to a PDFPage in the worker thread.
* @alias PDFPageProxy
class PDFPageProxy {
// 省略 n 行实现
* @param {GetViewportParameters} params - Viewport parameters.
* @returns {PageViewport} Contains 'width' and 'height' properties
* along with transforms required for rendering.
getViewport({
scale,
rotation = this.rotate,
offsetX = 0,
offsetY = 0,
dontFlip = false,
} = {}) {
return new PageViewport({
viewBox: this.view,
scale,
rotation,
offsetX,
offsetY,
dontFlip,
* Begins the process of rendering a page to the desired context.
* @param {RenderParameters} params Page render parameters.
* @returns {RenderTask} An object that contains the promise, which
* is resolved when the page finishes rendering.
render({
canvasContext,
viewport,
intent = "display",
enableWebGL = false,
renderInteractiveForms = false,
transform = null,
imageLayer = null,
canvasFactory = null,
background = null,
// 省略方法实现
PDFPageProxy 我们主要用到它的两个方法。通过 getViewport 可以根据指定的缩放比例（scale）、旋转角度（rotation）获取当前 PDF 页面的实际大小。通过 render 方法可以将 PDF 的内容渲染到指定的 canvas 上下文中。
实现细节
下载 PDF 分片
首先我们使用 PDF.js 提供的接口获取第一个分片的 url，然后再下载该分片的 PDF 文件。
/*
代码中使用 loadStatus 来记录特定页的内容是否一件下载
const pageLoadStatus = {
WAIT: 0, // 等待下下载
LOADED: 1, // 已经下载
// 拿到第一个分片
const { startPage, totalPage, url } = await fetchPdfFragment(1);
if (!pages) {
const pages = initPages(totalPage);
const loadingTask = PDFJS.getDocument(url);
loadingTask.promise.then((pdfDoc) => {
// 将已经下载的分片保存到 pages 数组中
for (let i = 0; i < pdfDoc.numPages; i += 1) {
const pageIndex = startPage + i;
const page = pages[pageIndex - 1];
if (page.loadStatus !== pageLoadStatus.LOADED) {
pdfDoc.getPage(i + 1).then((pdfPage) => {
page.pdfPage = pdfPage;
page.loadStatus = pageLoadStatus.LOADED;
// 通知可以进行渲染了
startRenderPages();
// 从服务器获取分片
asycn function fetchPdfFragment(pageIndex) {
省略具体实现
该方法从服务器获取包含指定页码(pageIndex)的 pdf 分片内容，
返回的格式参考上文约定：
"startPage": 1, // 分片的开始页码
"endPage": 5, // 分片结束页码
"totalPage": 100, // pdf 总页数
"url": "http://test.com/asset/fhdf82372837283.pdf" // 分片内容下载地址
// 创建一个 pages 数组来保存已经下载的 pdf
function initPages (totalPage) {
const pages = [];
for (let i = 0; i < totalPage; i += 1) {
pages.push({
pageNo: i + 1,
loadStatus: pageLoadStatus.WAIT,
pdfPage: null,
dom: null
渲染 PDF 分片
PDF 分片内容下载完成之后，我们就可以将其渲染到页面上。渲染之前，我们需要知道 PDF 页面的大小。调用 PDF.js 提供的方法，我们能够根据当前 PDF 的缩放比例、选择角度来获取页面的实际大小。
