引言

PDF文件現在在許多企業中常用 - 無論您是要生成銷售報告，交付合同還是發送發票，PDF都是首選的文件類型。PDF.js是由Mozilla編寫的JavaScript庫。由於它使用vanilla JavaScript實現PDF渲染，因此它具有跨瀏覽器兼容性，並且不需要安裝其他插件。在使用PDFJS之前你也可以先了解下原生的PDF<object>對象，本文僅介紹PDFJS。/<object>

官網地址

https://mozilla.github.io/pdf.js/

下載和安裝

官網提供了下載入口,有穩定版和Beta版,我們要在生產環境下使用建議使用穩定版,官網給我們提供了三種獲取PDF.js的方式

使用說明

我們可以直接使用cdn服務，也可以將下載的文件引入，我們看一下示例代碼，這裡我提供了兩種寫法，在項目運行之前，請確保你的同級目錄下有一個test.pdf文件

//index.html



 
 
 
 
 
 <title>PDF/<title>


 <canvas>


//index.js
// var loadingTask = pdfjsLib.getDocument("test.pdf");
// loadingTask.promise.then(
// function(pdf) {
// // 加載第一頁
// pdf.getPage(1).then(function(page) {
// var scale = 1;
// var viewport = page.getViewport(scale);
// //應用到頁面的canvas上.
// var canvas = document.getElementById("pdf");
// var context = canvas.getContext("2d");
// canvas.height = viewport.height;
// canvas.width = viewport.width;
// // 渲染canvas.
// var renderContext = {
// canvasContext: context,
// viewport: viewport
// };
// page.render(renderContext).then(function() { 

// console.log("Page rendered!");
// });
// });
// },
// function(reason) {
// console.error(reason);
// }
// );
// index.js
(async () => {
 const loadingTask = pdfjsLib.getDocument("test.pdf");
 const pdf = await loadingTask.promise;
 // 加載第一頁.
 const page = await pdf.getPage(1);
 const scale = 1;
 const viewport = page.getViewport(scale);
 // 應用到頁面的canvas上.
 const canvas = document.getElementById("pdf");
 const context = canvas.getContext("2d");
 canvas.height = viewport.height;
 canvas.width = viewport.width;
 // 渲染canvas.
 const renderContext = {
 canvasContext: context,
 viewport: viewport
 };
 await page.render(renderContext);
})();

當我們運行項目之後，打開瀏覽器查看，它已經將pdf的內容渲染到了瀏覽器中，且顯示了第一頁，如下圖所示：

如果就這樣的話遠遠是無法滿足我們使用的，因此我們來看一下它比較高級的用法，或者說簡單的用法，高級的功能。

使用iframe

首先我們將我們下載的js包加壓，複製裡面的web文件夾，粘貼到你的項目目錄

然後修改你的index.html代碼，首先註釋掉之前引入的js代碼，然後修改body，如下


 <iframe>

隨後打開我們的瀏覽器，你會發現一個預覽的窗口

它繼承了我們常用的功能，比如旋轉、下載、打印、自適應縮放、放大、縮小等，我們只需要使用iframe引入我們的pdf文件即可，其餘的全部交給pdf來完成，即可獲得一個實現一個完整的pdf預覽功能。

PDF.js三個不同層

核心 - PDF的二進制格式在此層中進行解釋。直接使用該層被認為是高級用法。
顯示 - 該層構建在核心層之上，為大多數日常工作提供易於使用的界面。
Viewer - 除了提供編程API之外，PDF.js還附帶一個現成的用戶界面，其中包括對搜索，旋轉，縮略圖側邊欄和許多其他內容的支持。

PDFJS的這三層分開，讓我們很好的來根據業務需求來實現我們想要的部分，其簡單的api讓我們得心應手，總而言之，PDFJS是一個絕佳的PDF預覽解決方案。

總結

PDFJS不僅僅支持pdf的二進制文件，同樣還支持base64編碼的pdf，如果在你的項目中需要用到pdf的預覽等功能，無疑它是一種良好的解決方案，當然想要實現相同的功能有許多辦法，我們可以選擇最適合我們需求的，官方還提供了一個完整的演示Demo，如下截圖，如果你覺得本文對你有幫助，請麻煩轉發、點贊加關注吧，後續會分享更多實用有趣的技術！