pdf.js是一款開源的pdf文檔讀取解析插件,據說在HTML5下誕生的,對於主流的瀏覽器基本都支持。
官網GitHub地址如下:https://github.com/mozilla/pdf.js
由於官網項目文件過多,不太容易理解,因此,我自己針對此項目做了一個簡單的Demo,Demo參考地址如下:
1.新窗口瀏覽pdf文檔:http://www.51purse.com/pdf/web/viewer.html?name=b.pdf
2.點擊連接讀取第一頁的pdf文檔:http://www.51purse.com/pdf/web/demo1.html
3.點擊連接,選擇需要打開的文件,進行pdf預覽:http://www.51purse.com/pdf/web/demo2.html
pdf.js主要包含兩個庫文件,一個pdf.js和一個pdf.worker.js,,一個負責API解析,一個負責核心解析
比如Demo1,點擊連接,可在當前頁面打開一個pdf文檔,進行預覽,代碼剖析
1.引入pdf.js
2.解析讀取pdf
function showPdf(){ PDFJS.workerSrc = '../build/pdf.worker.js';//加載核心庫PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {// // 獲取第一頁數據//pdf.getPage(1).then(function getPageHelloWorld(page) {var scale = 1.5;var viewport = page.getViewport(scale);// // Prepare canvas using PDF page dimensions//var canvas = document.getElementById('the-canvas');var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width;// // Render PDF page into canvas context//var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }); }
3.設置HTML標籤
<a href="javascript:void(0)" target="_blank" onclick="showPdf()">顯示pdf文檔</a>
<canvas id="the-canvas"></canvas>
4.demo1是通過調用API自己解析,通常,我們直接使用官網的Demo,比如viewer.html,或者Demo2,官方已經爲我們設置好了預覽的皮膚和各種事件,因此,我只需要將官方的庫引進去,會進行本地預覽即可。