轉自：https://www.cnblogs.com/xiangliuyunyang/p/5956453.html
pdf.js可以實現在html下直接瀏覽pdf文檔，是一款開源的pdf文檔讀取解析插件
pdf.js主要包含兩個庫文件，一個pdf.js和一個pdf.worker.js，，一個負責API解析，一個負責核心解析
下載地址：http://cnblogs.com/files/xiangliuyunyang/build.zip
兩個主要demo
1.點擊連接讀取第一頁的pdf文檔：http://www.51purse.com/pdf/web/demo1.html（此處沒有自己上傳）
2.點擊連接，選擇需要打開的文件，進行pdf預覽：http://www.51purse.com/pdf/web/demo2.html（此處沒有自己上傳）
參考代碼：
demo1:
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>Document</title> 5 <style type="text/css"> 6 .lightbox{ 7 position: fixed; 8 top: 0px; 9 left: 0px; 10 height: 100%; 11 width: 100%; 12 z-index: 7; 13 opacity: 0.3; 14 display: block; 15 background-color: rgb(0, 0, 0); 16 } 17 .pop{ 18 position: absolute; 19 left: 50%; 20 width: 894px; 21 margin-left: -447px; 22 z-index: 9; 23 } 24 </style> 25 <script src="Scripts/pdf.js" type="text/javascript"></script> 26 <script type="text/javascript"> 27 function showPdf() { 28 var container = document.getElementById("container"); 29 container.style.display = "block"; 30 var url = 'Scripts/jQuery經典入門教程(絕對詳細).pdf'; 31 PDFJS.workerSrc = 'Scripts/pdf.worker.js'; 32 PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) { 33 pdf.getPage(1).then(function getPageHelloWorld(page) { 34 var scale = 1; 35 var viewport = page.getViewport(scale); 36 var canvas = document.getElementById('the-canvas'); 37 var context = canvas.getContext('2d'); 38 canvas.height = viewport.height; 39 canvas.width = viewport.width; 40 var renderContext = { 41 canvasContext: context, 42 viewport: viewport 43 }; 44 page.render(renderContext); 45 }); 46 }); 47 } 48 </script> 49 </head> 50 <body> 51 <h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">顯示pdf文檔</a></h1> 52 <div id="container" style="display: none;"> 53 <div class="lightbox"></div> 54 <div id="pop" class="pop"> 55 <canvas id="the-canvas"></canvas> 56 </div> 57 </div> 58 </body> 59 </html>
demo2:
<html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .lightbox{ position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 7; opacity: 0.3; display: block; background-color: rgb(0, 0, 0); display: none; } .pop,iframe{ position: absolute; left: 50%; top:0; width: 893px; height: 100%; margin-left: -446.5px; z-index: 9; } </style> <script src="Scripts/pdf.js" type="text/javascript"></script> <script type="text/javascript"> function showPdf(isShow) { var state = ""; if (isShow) { state = "block"; } else { state = "none"; } var pop = document.getElementById("pop"); pop.style.display = state; var lightbox = document.getElementById("lightbox"); lightbox.style.display = state; } function close() { showPdf(false); } </script> </head> <body> <ul> <li><a href="Scripts/jQuery經典入門教程(絕對詳細).pdf" target="pdfContainer" onclick="showPdf(true)">0001_pdf</a></li> </ul> <div class="lightbox" id="lightbox"></div> <div id="pop" class="pop" style="display: none;"> <a href="javascript:close()" style=" position: absolute; right: -90px; display: inline-block; width: 80px; height: 30px; " id="close">關閉</a> <iframe src="" frameborder="0" id="pdfContainer" name="pdfContainer"></iframe> </div> </body> </html>
項目架構：
注（下面內容來自論壇：http://bbs.csdn.net/topics/392177382）：
pdf.js 應該是每次只能把一頁放到一個canvas裏，官方的例子也是如此。所以把所有頁面放在多個canvas內就可以解決。
寫一個for循環去把每一頁讀取出來放到一個動態創建的canvas元素裏，追加到原來的canvas後面即可。
如果不明白，看下面我改的代碼：
PDFJS.getDocument("http://www.server.com/file.pdf").then(function getPdfHelloWorld(pdf) {
for (var i = 0; i < pdf.numPages; i++) {
//
// 獲取第i頁
//
pdf.getPage(i).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// 這裏拿body當pdf容器
document.body.appendChild(canvas);
//
// Render PDF page into canvas context
//
page.render({canvasContext: context, viewport: viewport});
});
}
});