Android webview加载pdf实验成功
生活随笔
收集整理的這篇文章主要介紹了
Android webview加载pdf实验成功
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
pdf.js可以實現(xiàn)在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>項目架構：
?
總結
以上是生活随笔為你收集整理的Android webview加载pdf实验成功的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： GitHub 新手详细教程转载，亲测可用
- 下一篇： Visual C++ 中的ODBC编程