Android 使用PDF.js浏览pdf的方法示例
作者：Wang_Yi 时间：2021-12-08 06:11:41
Android的WebView做不到ios的WebView那样可以很方便的直接预览pdf文件。要实现利用WebView预览pdf我们可以使用谷歌文档服务：
mWebView.loadUrl("http://docs.google.com/gviewembedded=true&url=" + pdfUrl);
这种方式国内网络环境是不用考虑的。当然也有替代的方案：我们可以使用mozilla开源的PDF.js。
Github
mozilla 官方demo
一 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目录下
如果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
<!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.实现预览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：
自定义预览界面：
Github https://github.com/wangyiwy/PDF_Preview
来源：https://www.jianshu.com/p/fec41669acbb
0
投稿猜你喜欢
Mybatis多表关联查询的实现(DEMO)
Java Swing JFrame窗口的实现
android scrollview 滑动到顶端或者指定位置的实现方法
Java设计模式之观察者模式（Observer模式）介绍
Android自定义view实现列表内左滑删除Item
IntelliJ IDEA 2020 安装和常用配置(推荐)
英语单词state与status的区别
关于Spring Data Jpa 自定义方法实现问题
Android实现旋转动画
Java使用通配符实现增强泛型详解
Android实现截图和分享功能的代码
Springboot公共字段填充及ThreadLocal模块改进方案
Android studio设置文件头定制代码注释的方法
Android实现点汇聚成字的动态效果详解
Android使用ViewPager实现图片滑动预览效果
C#影院售票系统毕业设计（4）
Jackson的用法实例分析
将15位身份证补全为18位身份证的算法示例详解
