pdf.js 使用實例
阿新 • • 發佈：2019-01-09
width char line 需要 fun sta title 負責 bubuko
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:
<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); } .pop{ position: absolute; left: 50%; width: 894px; margin-left: -447px; z-index: 9; } </style> <script src="Scripts/pdf.js" type="text/javascript"></script> <script type="text/javascript"> function showPdf() { var container = document.getElementById("container"); container.style.display = "block"; var url = ‘Scripts/jQuery經典入門教程(絕對詳細).pdf‘; PDFJS.workerSrc = ‘Scripts/pdf.worker.js‘; PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) { pdf.getPage(1).then(function getPageHelloWorld(page) { var scale = 1; var viewport = page.getViewport(scale); var canvas = document.getElementById(‘the-canvas‘); var context = canvas.getContext(‘2d‘); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }); } </script> </head> <body> <h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">顯示pdf文檔</a></h1> <div id="container" style="display: none;"> <div class="lightbox"></div> <div id="pop" class="pop"> <canvas id="the-canvas"></canvas> </div> </div> </body> </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>
項目架構：
轉自：https://www.cnblogs.com/xiangliuyunyang/p/5956453.html
pdf.js 使用實例