欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android 使用PDF.js瀏覽pdf的方法示例

 更新時間：2018年03月13日 15:23:13   作者：Wang_Yi  
這篇文章主要介紹了Android 使用PDF.js瀏覽pdf的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

Android的WebView做不到ios的WebView那樣可以很方便的直接預(yù)覽pdf文件。要實現(xiàn)利用WebView預(yù)覽pdf我們可以使用谷歌文檔服務(wù)：

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

這種方式國內(nèi)網(wǎng)絡(luò)環(huán)境是不用考慮的。當然也有替代的方案：我們可以使用mozilla開源的PDF.js。

Github

mozilla 官方demo

一 WebView設(shè)置：

WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowFileAccess(true);
webSettings.setAllowFileAccessFromFileURLs(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);

二 實現(xiàn)方式

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

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

這種方式和使用google docs是差不多一樣的，重要的是國內(nèi)可以直接訪問，但是會遇到跨域的問題。

方式二: 下載PDF.js放到assets目錄下


如果pdf文件不能跨域訪問的話可以使用這種方式，先把文件下載到本地然后傳入本地文件路徑預(yù)覽pdf：

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

PDF.js本身是一個比較大的庫，如果全部放到本地的話apk差不多會增大5m左右。所以我們可以考慮吧PDF.js部署到服務(wù)端或者使用cdn的方式。

方式三:自定義預(yù)覽界面，PDF.js使用cdn的方式導(dǎo)入

1.首先寫一個預(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.實現(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兩個文件，可以避免直接全部導(dǎo)入帶來的apk體積增大的問題，如果我們對預(yù)覽UI和交互有要求的話可以方便的通過修改html來實現(xiàn)。

三 遇到的問題

在直接實現(xiàn)預(yù)覽的時候遇到顯示模糊的問題，通過增大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;

四 實現(xiàn)效果

mozilla viewer：

自定義預(yù)覽界面：

Github https://github.com/wangyiwy/PDF_Preview

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論