Android 使用PDF.js瀏覽pdf的方法示例
Android的WebView做不到ios的WebView那樣可以很方便的直接預(yù)覽pdf文件。要實(shí)現(xiàn)利用WebView預(yù)覽pdf我們可以使用谷歌文檔服務(wù)：
mWebView.loadUrl("http://docs.google.com/gviewembedded=true&url=" + pdfUrl);
這種方式國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境是不用考慮的。當(dāng)然也有替代的方案：我們可以使用mozilla開源的PDF.js。
一 WebView設(shè)置：
WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setAllowFileAccess(true); webSettings.setAllowFileAccessFromFileURLs(true); webSettings.setAllowUniversalAccessFromFileURLs(true);
二 實(shí)現(xiàn)方式
方式一: 使用mozilla部署在github pages上的Viewer
View.loadUrl("http://mozilla.github.io/pdf.js/web/viewer.html?file=" + pdfUrl);
這種方式和使用google docs是差不多一樣的，重要的是國(guó)內(nèi)可以直接訪問，但是會(huì)遇到跨域的問題。
方式二: 下載PDF.js放到assets目錄下
如果pdf文件不能跨域訪問的話可以使用這種方式，先把文件下載到本地然后傳入本地文件路徑預(yù)覽pdf：
mWebView.loadUrl("file:///android_asset/pdfjs/web/viewer.html?file=" + pdfUrl);
PDF.js本身是一個(gè)比較大的庫(kù)，如果全部放到本地的話apk差不多會(huì)增大5m左右。所以我們可以考慮吧PDF.js部署到服務(wù)端或者使用cdn的方式。
方式三:自定義預(yù)覽界面，PDF.js使用cdn的方式導(dǎo)入
1.首先寫一個(gè)預(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>
2.實(shí)現(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)
}
});
3.WebView加載html
mWebView.loadUrl("file:///android_asset/index.html?" + pdfUrl);
這樣我們最終放到assets目錄下的就index.html和index.js兩個(gè)文件，可以避免直接全部導(dǎo)入帶來的apk體積增大的問題，如果我們對(duì)預(yù)覽UI和交互有要求的話可以方便的通過修改html來實(shí)現(xiàn)。
三 遇到的問題
在直接實(shí)現(xiàn)預(yù)覽的時(shí)候遇到顯示模糊的問題，通過增大scale系數(shù)解決
var viewport = page.getViewport(2.0);//設(shè)置為2.0
pdf內(nèi)容顯示不完整，通過設(shè)置cMapUrl和cMapPacked解決
PDFJS.cMapUrl = 'https://unpkg.com/pdfjs-dist@1.9.426/cmaps/'; PDFJS.cMapPacked = true;
四 實(shí)現(xiàn)效果
mozilla viewer：
自定義預(yù)覽界面：
Github https://github.com/wangyiwy/PDF_Preview
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android編程設(shè)計(jì)模式之狀態(tài)模式詳解
這篇文章主要介紹了Android編程設(shè)計(jì)模式之狀態(tài)模式,結(jié)合實(shí)例形式詳細(xì)分析了Android狀態(tài)模式的概念、功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-12-12
Android ViewPager實(shí)現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了Android ViewPager實(shí)現(xiàn)輪播圖效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)顏色選取圓盤，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
android開發(fā)修改狀態(tài)欄背景色和圖標(biāo)顏色的示例
本篇文章主要介紹了android開發(fā)修改狀態(tài)欄背景色和圖標(biāo)顏色的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
詳細(xì)分析Android-Zygote的啟動(dòng)過程
在Android系統(tǒng)中，所有的應(yīng)用程序進(jìn)程以及系統(tǒng)服務(wù)進(jìn)程SystemServer都是由Zygote進(jìn)程孕育（fork）出來的，這也許就是為什么要把它稱為Zygote（受精卵）的原因吧。由于Zygote進(jìn)程在Android系統(tǒng)中有著如此重要的地位，本文將詳細(xì)分析它的啟動(dòng)過程2021-06-06
Android開發(fā)MQTT協(xié)議的模型及通信淺析
這篇文章主要W為大家介紹了Android開發(fā)MQTT協(xié)議的模型及通信淺析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Android開發(fā)中Widget的生命周期實(shí)例分析
這篇文章主要介紹了Android開發(fā)中Widget的生命周期,結(jié)合實(shí)例形式分析了Android開發(fā)中Widget生命周期所涉及的常用方法與使用技巧,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下2016-02-02
這篇文章主要為大家介紹了Kotlin注解與反射的定義及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
本文主要對(duì)RecyclerView的使用進(jìn)行了詳細(xì)介紹，文章結(jié)尾附上源碼下載，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
Android高仿抖音照片電影功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了Android高仿抖音照片電影功能的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09