深入淺出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 = 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實例化和文檔載入的步驟，也要提防安全限制。