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