Android 使用PDF.js浏览pdf

时间 2019-11-16

标签 android 使用 pdf.js pdf 浏览栏目 Android 繁體版

原文原文链接

Android的WebView作不到ios的WebView那样能够很方便的直接预览pdf文件。要实现利用WebView预览pdf咱们能够使用谷歌文档服务：javascript

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

这种方式国内网络环境是不用考虑的。固然也有替代的方案：咱们能够使用mozilla开源的PDF.js。css

Githubhtml

mozilla 官方demojava

一 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是差很少同样的，重要的是国内能够直接访问，可是会遇到跨域的问题。android

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

若是pdf文件不能跨域访问的话能够使用这种方式，先把文件下载到本地而后传入本地文件路径预览pdf：ios

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

PDF.js自己是一个比较大的库，若是所有放到本地的话apk差很少会增大5m左右。因此咱们能够考虑吧PDF.js部署到服务端或者使用cdn的方式。git

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

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

<!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.jsweb

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加载htmlcanvas

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