使用pdf.js閱讀PDF文檔的全流程

PDF文檔是一種在各種設備和平台上保留格式的常見文件類型。在許多情況下，我們需要在網頁中嵌入PDF文件來方便客戶在線瀏覽。本文將介紹如何使用pdf.js庫在網頁中嵌入PDF文件，並為您提供一個完整的示例代碼。

一、下載pdf.js庫

首先，我們需要從GitHub上下載pdf.js庫，該庫是Mozilla開發的一個JavaScript庫，可以在Web瀏覽器中渲染PDF文件。您可以在下面給出的GitHub鏈接中下載pdf.js庫，並將它解壓到您的項目目錄中。

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

二、在HTML中嵌入PDF文件

我們將在下面的示例代碼中使用pdf.js中提供的viewer.html文件作為演示，它是一個使用pdf.js庫嵌入PDF文件的完整示例。您只需將文件複製到您的項目文件夾中，並將其命名為index.html。該文件的代碼如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>PDF Viewer</title>
    <link rel="stylesheet" href="./web/viewer.css">
  </head>
  <body>
    <div id="viewer" class="pdfViewer"></div>
    <script src="./build/pdf.js"></script>
    <script src="./build/pdf.worker.js"></script>
    <script src="./web/viewer.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        PDFJS.getDocument("./helloworld.pdf").then(function(pdf) {
          var viewer = document.getElementById('viewer');
          pdf.getPage(1).then(function(page) {
            var scale = 1.5;
            var viewport = page.getViewport(scale);
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            viewer.appendChild(canvas);
            page.render({canvasContext: context, viewport: viewport});
          });
        });
      });
    </script>
  </body>
</html>

在上面的代碼中，我們使用了pdf.js庫提供的viewer.css和viewer.js文件。我們使用文檔對象模型（DOM）中的canvas元素來顯示PDF頁面。getDocument函數負責載入PDF文件，getPage函數獲得單個頁面，並將該頁面渲染到canvas中。

三、載入PDF文件

在上面的HTML代碼中，我們使用pdf.js庫提供的函數來載入PDF文件。下面是完整的載入PDF文件的代碼示例：

PDFJS.getDocument("./helloworld.pdf").then(function(pdf) {
  // Do something with the PDF file
});

在上面的代碼中，getDocument函數載入PDF文件並返回一個Promise對象，當Promise對象解析時，我們可以使用返回的pdf對象執行其他操作。

四、獲得PDF頁面

一旦我們載入了PDF文件，我們就可以獲得PDF頁面並在瀏覽器窗口中顯示它們。下面是獲得PDF頁面的完整代碼示例：

pdf.getPage(1).then(function(page) {
  // Do something with the PDF page
});

在上面的代碼中，我們使用getPage函數獲取指定頁碼的PDF頁面，並在解析Promise對象時使用返回的page對象執行其他操作。

五、在canvas中顯示PDF頁面

現在我們獲得了PDF頁面，我們需要顯示它們。我們將使用canvas元素來顯示PDF頁面。下面是將PDF頁面渲染到canvas元素中的完整代碼示例：

var scale = 1.5;
var viewport = page.getViewport(scale);
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
viewer.appendChild(canvas);
page.render({canvasContext: context, viewport: viewport});

在上面的代碼中，我們首先使用getViewport函數來獲取頁面縮放比例，然後創建一個canvas元素並設置其高度和寬度。然後，我們附加canvas元素到我們的PDF瀏覽器窗口中，並使用渲染函數將頁面渲染到canvas中。

六、總結

以上就是使用pdf.js庫嵌入PDF文件並在瀏覽器窗口中顯示PDF頁面的完整流程和示例代碼。希望這篇文章對您有所幫助。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/259249.html