深入浅出pdfjs-dist

pdfjs-dist是一个基于HTML5技术的PDF阅读器，对于需要Web端渲染PDF文档和PDF交互的开发人员来说其非常实用。本文将从多个方面深入浅出介绍pdfjs-dist库，包括其基本用法、加载PDF文档、渲染PDF文档、处理用户交互等方面。

一、基本用法

在使用pdfjs-dist之前，我们需要先引入所需的JS文件，这包括pdf.js和pdf.worker.js文件。pdf.js是PDFJS库的主要代码文件，而pdf.worker.js是PDFJS库的工作线程代码文件。

<script src="path/to/pdf.js"></script>
<script src="path/to/pdf.worker.js"></script>

接着，我们需要从指定的URL加载PDF文档。PDFJS提供了一个简单的API来做到这一点：

PDFJS.getDocument('path/to/pdf/file.pdf').then(function(pdf) {
  // ...
});

这里，我们使用getDocument()方法来获取PDF文档对象。当该Promise对象被解决时，我们就可以访问PDF文档的各种属性和方法，例如获取PDF文档总页数。下面是一个获取PDF文档页面数的简单示例：

PDFJS.getDocument('path/to/pdf/file.pdf').then(function(pdf) {
  var numPages = pdf.numPages;
  console.log(numPages);
});

二、加载PDF文档

PDFJS提供了非常方便的API来加载PDF文档，但是要注意以下几点：

• 要加载的PDF文档必须先存在于服务器上。
• 如果PDF文档受到密码保护，那么我们需要先提供密码才能加载PDF文档。
• PDFJS需要与加载PDF文档相同的域名进行交互，否则会出现安全限制。

当我们需要加载PDF文档时，PDFJS提供了两种不同的方式：使用URL和使用 ArrayBuffer 对象。

如果我们使用URL方式加载PDF文档，我们只需要提供一个指向PDF文档的URL即可：

PDFJS.getDocument('path/to/pdf/file.pdf')
  .then(function(pdf) {
    // ...
  });

当使用ArrayBuffer方式加载PDF文档时，我们需要手动引入PDFWorker：

import { PDFWorker } from 'pdfjs-dist';
const worker = new PDFWorker();
worker.loadDocument(arrayBuffer).then((pdf) => {
  // ...
});

需要注意的是，使用ArrayBuffer方式加载PDF文档，在创建PDFWorker实例之前，我们需要在脚本中创建Blob URL，这通常可以通过FileReader实现。这个方法可能会造成一定的兼容性问题，需要根据具体情况进行处理。

三、渲染PDF文档

PDFJS可以很容易地在HTML5画布(canvas)上渲染PDF文档，这要通过PDFDocument对象的getPage()方法与CanvasRenderingContext2D对象的drawImage()方法结合来完成。下面是一个简单的例子：

PDFJS.getDocument('path/to/pdf/file.pdf')
  .then(function(pdf) {
    pdf.getPage(1).then(function(page) {
      var canvas = document.getElementById('pdf-canvas');
      var context = canvas.getContext('2d');

      var viewport = page.getViewport(1.0);
      canvas.width = viewport.width;
      canvas.height = viewport.height;

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

上述代码中，我们使用getPage()方法获取PDF文档的第一页，使用getViewport()方法获取PDF页面的视口对象，然后使用CanvasRenderingContext2D对象的drawImage()方法将PDF页面渲染到指定的画布上。

四、处理用户交互

除了可以渲染PDF文档，PDFJS还提供了一些API来处理用户交互事件，例如页面切换、缩放、旋转和注释等。下面是一些常用的交互操作示例：

1、绑定页面切换事件，当用户翻页时触发：

pdf.getPage(pageNumber).then(function(page) {
  // Get the viewport object.
  var viewport = page.getViewport(scale);

  // Render the page into a canvas element.
  var canvas = document.getElementById('pdf-canvas');
  var context = canvas.getContext('2d');

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

  // Bind the "pagerendered" event.
  var pageNumber = 1;
  page.getRendering().then(function(renderTask) {
    renderTask.promise.then(function() {
      console.log('Page rendered!');
      var nextPage = pageNumber + 1;
      if (nextPage <= pdf.numPages) {
        pdf.getPage(nextPage).then(function(nextPage) {
          pageNumber = nextPage.number;
          // ...
        });
      }
    });
  });
});

2、绑定PDF文档缩放事件，当用户放大或缩小时触发：

var DEFAULT_SCALE = 1.0;

var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = DEFAULT_SCALE;

PDFJS.getDocument(url).then(function (doc) {
  pdfDoc = doc;
  renderPage(pageNum);
});

function renderPage(num) {
  pageRendering = true;
  pdfDoc.getPage(num).then(function(page) {
    var viewport = page.getViewport(scale);
    var canvas = document.getElementById('the-canvas');
    var ctx = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);
    renderTask.promise.then(function () {
      pageRendering = false;
      if (pageNumPending !== null) {
        renderPage(pageNumPending);
        pageNumPending = null;
      }
    });
  });
}

function zoomIn() {
  var newScale = scale + 0.1;
  if (newScale <= 5) {
    scale = newScale;
    renderPage(pageNum);
  }
}

function zoomOut() {
  var newScale = scale - 0.1;
  if (newScale >= 0.2) {
    scale = newScale;
    renderPage(pageNum);
  }
}

document.getElementById('zoom-in').addEventListener('click', zoomIn);
document.getElementById('zoom-out').addEventListener('click', zoomOut);

以上代码，为用户提供缩放控制按钮，并使用了EVENT监听来调整PDF的放大比例。

五、总结

本文介绍了PDFJS的基本用法、加载PDF文档、渲染PDF文档和处理用户交互等方面，这些操作都可以以非常优雅的方式实现在Web页面的中。PDFJS的编写过程中，我们要注意JS实例化和文档加载的步骤，也要提防安全限制。