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; 80px; height: 30px; " id="close">关闭</a> <iframe src="" frameborder="0" id="pdfContainer" name="pdfContainer"></iframe> </div> </body> </html>
项目架构：