android+web+to+pdf,Android 使用PDF.js浏览pdf

Android的WebView做不到ios的WebView那样可以很方便的直接预览pdf文件。要实现利用WebView预览pdf我们可以使用谷歌文档服务:

mWebView.loadUrl("http://docs.google.com/gviewembedded=true&url=" + pdfUrl);

这种方式国内网络环境是不用考虑的。当然也有替代的方案:我们可以使用mozilla开源的PDF.js。

一 WebView设置:

WebSettings webSettings = mWebView.getSettings();

webSettings.setJavaScriptEnabled(true);

webSettings.setAllowFileAccess(true);

webSettings.setAllowFileAccessFromFileURLs(true);

webSettings.setAllowUniversalAccessFromFileURLs(true);

二 实现方式

方式一: 使用mozilla部署在github pages上的Viewer

View.loadUrl("http://mozilla.github.io/pdf.js/web/viewer.html?file=" + pdfUrl);

这种方式和使用google docs是差不多一样的,重要的是国内可以直接访问,但是会遇到跨域的问题。

方式二: 下载PDF.js放到assets目录下

fec41669acbb

image

如果pdf文件不能跨域访问的话可以使用这种方式,先把文件下载到本地然后传入本地文件路径预览pdf:

mWebView.loadUrl("file:///android_asset/pdfjs/web/viewer.html?file=" + pdfUrl);

PDF.js本身是一个比较大的库,如果全部放到本地的话apk差不多会增大5m左右。所以我们可以考虑吧PDF.js部署到服务端或者使用cdn的方式。

方式三:自定义预览界面,PDF.js使用cdn的方式导入

1.首先写一个预览的index.html

content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

Document

canvas {

width: 100%;

height: 100%;

border: 1px solid black;

}

2.实现预览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两个文件,可以避免直接全部导入带来的apk体积增大的问题,如果我们对预览UI和交互有要求的话可以方便的通过修改html来实现。

三 遇到的问题

在直接实现预览的时候遇到显示模糊的问题,通过增大scale系数解决

var viewport = page.getViewport(2.0);//设置为2.0

pdf内容显示不完整,通过设置cMapUrl和cMapPacked解决

PDFJS.cMapUrl = 'https://unpkg.com/pdfjs-dist@1.9.426/cmaps/';

PDFJS.cMapPacked = true;

四 实现效果

mozilla viewer:

fec41669acbb

image

自定义预览界面:

fec41669acbb

image

Github

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值