Android 使用PDF.js浏览pdf
生活随笔
收集整理的這篇文章主要介紹了
Android 使用PDF.js浏览pdf
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
Android的WebView做不到ios的WebView那樣可以很方便的直接預(yù)覽pdf文件。要實現(xiàn)利用WebView預(yù)覽pdf我們可以使用谷歌文檔服務(wù)：
mWebView.loadUrl("http://docs.google.com/gviewembedded=true&url=" + pdfUrl); 復(fù)制代碼這種方式國內(nèi)網(wǎng)絡(luò)環(huán)境是不用考慮的。當(dāng)然也有替代的方案：我們可以使用mozilla開源的PDF.js。
Github
mozilla 官方demo
一 WebView設(shè)置：
WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setAllowFileAccess(true); webSettings.setAllowFileAccessFromFileURLs(true); webSettings.setAllowUniversalAccessFromFileURLs(true); 復(fù)制代碼二 實現(xiàn)方式
方式一: 使用mozilla部署在github pages上的Viewer
View.loadUrl("http://mozilla.github.io/pdf.js/web/viewer.html?file=" + pdfUrl); 復(fù)制代碼這種方式和使用google docs是差不多一樣的，重要的是國內(nèi)可以直接訪問，但是會遇到跨域的問題。
方式二: 下載PDF.js放到assets目錄下
如果pdf文件不能跨域訪問的話可以使用這種方式，先把文件下載到本地然后傳入本地文件路徑預(yù)覽pdf：
mWebView.loadUrl("file:///android_asset/pdfjs/web/viewer.html?file=" + pdfUrl); 復(fù)制代碼PDF.js本身是一個比較大的庫，如果全部放到本地的話apk差不多會增大5m左右。所以我們可以考慮吧PDF.js部署到服務(wù)端或者使用cdn的方式。
方式三:自定義預(yù)覽界面，PDF.js使用cdn的方式導(dǎo)入
1.首先寫一個預(yù)覽的index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/><title>Document</title><style type="text/css">canvas {width: 100%;height: 100%;border: 1px solid black;}</style><script src="https://unpkg.com/pdfjs-dist@1.9.426/build/pdf.min.js"></script><script type="text/javascript" src="index.js"></script> </head> <body> </body> </html> 復(fù)制代碼2.實現(xiàn)預(yù)覽index.js
var url = location.search.substring(1);PDFJS.cMapUrl = 'https://unpkg.com/pdfjs-dist@1.9.426/cmaps/'; PDFJS.cMapPacked = true;var pdfDoc = null;function createPage() {var div = document.createElement("canvas");document.body.appendChild(div);return div; }function renderPage(num) {pdfDoc.getPage(num).then(function (page) {var viewport = page.getViewport(2.0);var canvas = createPage();var ctx = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;page.render({canvasContext: ctx,viewport: viewport});}); }PDFJS.getDocument(url).then(function (pdf) {pdfDoc = pdf;for (var i = 1; i <= pdfDoc.numPages; i++) {renderPage(i)} }); 復(fù)制代碼3.WebView加載html
mWebView.loadUrl("file:///android_asset/index.html?" + pdfUrl); 復(fù)制代碼這樣我們最終放到assets目錄下的就index.html和index.js兩個文件，可以避免直接全部導(dǎo)入帶來的apk體積增大的問題，如果我們對預(yù)覽UI和交互有要求的話可以方便的通過修改html來實現(xiàn)。
三 遇到的問題
四 實現(xiàn)效果
mozilla viewer：
自定義預(yù)覽界面： Github總結(jié)
以上是生活随笔為你收集整理的Android 使用PDF.js浏览pdf的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Micropython Turnipbi
- 下一篇： Android P DP1：WiFi-R