pdf.js能夠實如今html下直接瀏覽pdf文檔,是一款開源的pdf文檔讀取解析插件javascript
pdf.js主要包含兩個庫文件,一個pdf.js和一個pdf.worker.js,一個負責API解析,一個負責核心解析。html
我發現pdf.js就是把pdf以圖片形式展現在頁面上的。 java
因此在使用以前須要導入這兩個jar包,具體使用最好查看Github上的開源項目(https://github.com/mozilla/pdf.js),上面的文檔也很詳細,在examples文件夾下有示例能夠參照。git
在咱們的項目中,通過測試發現可能因爲生成PDF文件工具的不一樣,因此PDF文檔的寬度也可能會有所不一樣,因此在項目中須要能自適應文件文檔寬度,按比例縮放顯示。github
實現代碼以下:canvas
<script type="text/javascript"> var pdfName="<%=parturl%>"; var curWwwPath = window.document.location.href; var pathName = window.document.location.pathname; var pos = curWwwPath.indexOf(pathName); //獲取主機地址,如: http://localhost:8083 var localhostPath = curWwwPath.substring(0, pos); //獲取帶"/"的項目名,如:/uimcardprj var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1); /* var url=localhostPath + projectName+'/WEB-INF/adminUpload/pdfFile/'+pdfName; */ var url=localhostPath + projectName+'/fileUpload/adminFile/'+pdfName; var pdfDoc = null, pageNum = 1, pageRendering = false, pageNumPending = null, scale = 1.5;//定義縮放比 /** * Get page info from document, resize canvas accordingly, and render page. * @param num Page number. */ function renderPage(num) { pageRendering = true; // Using promise to fetch the page pdfDoc.getPage(num).then(function(page) { var canvasList = document.getElementById('canvas_list'); var canvas = document.createElement('canvas'); canvasList.appendChild(canvas); var ctx = canvas.getContext('2d'); var viewport = page.getViewport(scale); canvas.height = viewport.height; canvas.width = viewport.width; // Render PDF page into canvas context var renderContext = { canvasContext: ctx, viewport: viewport }; var renderTask = page.render(renderContext); // Wait for rendering to finish renderTask.promise.then(function() { pageRendering = false; if (pageNumPending !== null) { // New page rendering is pending renderPage(pageNumPending); pageNumPending = null; } }); }); } /** * If another page rendering in progress, waits until the rendering is * finised. Otherwise, executes rendering immediately. */ function queueRenderPage(num) { if (pageRendering) { pageNumPending = num; } else { renderPage(num); } } /** * Asynchronously downloads PDF. */ PDFJS.getDocument(url).then(function(pdfDoc_) { pdfDoc = pdfDoc_; pdfDoc.getPage(1).then(function(page) { var viewport = page.getViewport(scale); //根據PDF寬度大小設置自適應縮放比 var temp = 3674.7-viewport.width; if(temp>0){ scale=Math.abs(3674.7-viewport.width)/1854.5; }else{ scale=Math.abs(6587-viewport.width)/7894.7; } //alert(scale+","+viewport.width); }); for(var i = 1 ; i <= pdfDoc.numPages; i++) { queueRenderPage(i); } }); </script>
代碼中的scale 變量是定義縮放比,默認是1.5倍顯示,定義viewport :promise
viewport = page.getViewport(scale);
此時viewport.width用來判斷在1.5倍縮放後PDF的寬度(以px爲單位),大部分在這個比例下寬度大約爲900px,顯示正常,可是也有特別大的,測試過程當中發現最大(寬)的一個PDF在1.5倍縮放下寬度約爲3900px,此時在頁面上只能顯示部分,因而調縮放比爲0.32的時候顯示正常,大約爲900px,根據這個關係,我列了一個二元一次方程組,試圖根據pdf在1.5倍縮放下的寬度(px),求出一個合理的縮放比(scale),使PDF的寬度都以900px顯示。由於測量的不許確,求出的參數差距很大,在最後不得已採用兩組參數混合使用,才起到了對PDF很好的兼容。服務器
因爲全部的PDF文檔是上傳到服務器上而不是本地,因此上面的代碼中有一部分是爲了獲取到PDF文件的地址。能夠對比官方示例進行學習。app
官方helloworld.html代碼:ide
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>'Hello, world!' example</title> </head> <body> <h1>'Hello, world!' example</h1> <canvas id="the-canvas" style="border:1px solid black"></canvas> <script src="pdf.js"></script> <script id="script"> // // If absolute URL from the remote server is provided, configure the CORS // header on that server. // var url = './helloworld.pdf'; // // The workerSrc property shall be specified. // pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.js'; // // Asynchronous download PDF // var loadingTask = pdfjsLib.getDocument(url); loadingTask.promise.then(function(pdf) { // // Fetch the first page // pdf.getPage(1).then(function(page) { var scale = 1.5; var viewport = page.getViewport({ scale: 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); }); }); </script> <hr> <h2>JavaScript code:</h2> <pre id="code"></pre> <script> document.getElementById('code').textContent = document.getElementById('script').text; </script> </body> </html>
效果圖以下所示: