引言
PDF文件現(xiàn)在在許多企業(yè)中常用 - 無論您是要生成銷售報告，交付合同還是發(fā)送發(fā)票，PDF都是首選的文件類型。PDF.js是由Mozilla編寫的JavaScript庫。由于它使用vanilla JavaScript實現(xiàn)PDF渲染，因此它具有跨瀏覽器兼容性，并且不需要安裝其他插件。在使用PDFJS之前你也可以先了解下原生的PDF<object>對象，本文僅介紹PDFJS。
官網(wǎng)地址
https://mozilla.github.io/pdf.js/
下載和安裝
官網(wǎng)提供了下載入口,有穩(wěn)定版和Beta版,我們要在生產(chǎn)環(huán)境下使用建議使用穩(wěn)定版,官網(wǎng)給我們提供了三種獲取PDF.js的方式
使用說明
我們可以直接使用cdn服務(wù)，也可以將下載的文件引入，我們看一下示例代碼，這里我提供了兩種寫法，在項目運行之前，請確保你的同級目錄下有一個test.pdf文件
//index.html<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <script src='https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js'></script> <script src='./index.js'></script> <title>PDF</title></head><body> <canvas id='pdf'></canvas></body></html>//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);})();
當我們運行項目之后，打開瀏覽器查看，它已經(jīng)將pdf的內(nèi)容渲染到了瀏覽器中，且顯示了第一頁，如下圖所示：
如果就這樣的話遠遠是無法滿足我們使用的，因此我們來看一下它比較高級的用法，或者說簡單的用法，高級的功能。
使用iframe
首先我們將我們下載的js包加壓，復制里面的web文件夾，粘貼到你的項目目錄
然后修改你的index.html代碼，首先注釋掉之前引入的js代碼，然后修改body，如下
<body> <iframe src='test.pdf' style='border: none;' width='100%' height='1000px'></iframe></body>
隨后打開我們的瀏覽器，你會發(fā)現(xiàn)一個預覽的窗口
它繼承了我們常用的功能，比如旋轉(zhuǎn)、下載、打印、自適應縮放、放大、縮小等，我們只需要使用iframe引入我們的pdf文件即可，其余的全部交給pdf來完成，即可獲得一個實現(xiàn)一個完整的pdf預覽功能。
PDF.js三個不同層
- 核心 - PDF的二進制格式在此層中進行解釋。直接使用該層被認為是高級用法。
- 顯示 - 該層構(gòu)建在核心層之上，為大多數(shù)日常工作提供易于使用的界面。
- Viewer - 除了提供編程API之外，PDF.js還附帶一個現(xiàn)成的用戶界面，其中包括對搜索，旋轉(zhuǎn)，縮略圖側(cè)邊欄和許多其他內(nèi)容的支持。
PDFJS的這三層分開，讓我們很好的來根據(jù)業(yè)務(wù)需求來實現(xiàn)我們想要的部分，其簡單的api讓我們得心應手，總而言之，PDFJS是一個絕佳的PDF預覽解決方案。
總結(jié)
PDFJS不僅僅支持pdf的二進制文件，同樣還支持base64編碼的pdf，如果在你的項目中需要用到pdf的預覽等功能，無疑它是一種良好的解決方案，當然想要實現(xiàn)相同的功能有許多辦法，我們可以選擇最適合我們需求的，官方還提供了一個完整的演示Demo，如下截圖，如果你覺得本文對你有幫助，請麻煩轉(zhuǎn)發(fā)、點贊加關(guān)注吧，后續(xù)會分享更多實用有趣的技術(shù)！
