Android 使用PDF.js瀏覽pdf

月光邊境發表於2019-03-04
AndroidJS

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目錄下

Android 使用PDF.js瀏覽pdf

如果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來實現。

三 遇到的問題

  1. 在直接實現預覽的時候遇到顯示模糊的問題，通過增大scale係數解決
 var viewport = page.getViewport(2.0);//設定為2.0
複製程式碼
  1. pdf內容顯示不完整，通過設定cMapUrl和cMapPacked解決
PDFJS.cMapUrl = `https://unpkg.com/pdfjs-dist@1.9.426/cmaps/`;
PDFJS.cMapPacked = true;
複製程式碼

四 實現效果

mozilla viewer：

Android 使用PDF.js瀏覽pdf

自定義預覽介面：

Android 使用PDF.js瀏覽pdf

Github

相關文章