Android 使用PDF.js浏览pdf的方法示例

 更新时间:2018年03月13日 15:23:13   作者:Wang_Yi  
这篇文章主要介绍了Android 使用PDF.js浏览pdf的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Android实现音量调节的方法

    Android实现音量调节的方法

    这篇文章主要介绍了Android实现音量调节的方法,涉及Android页面布局及多媒体播放的设置技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • 通过WIFI(不用数据线)连接Android手机调试

    通过WIFI(不用数据线)连接Android手机调试

    本文主要介绍WIFI 链接手机调试,这里详细介绍了WIFI 链接Android手机实现调试的过程,有需要的小伙伴可以参考下
    2016-08-08
  • Android实现简单C/S聊天室应用

    Android实现简单C/S聊天室应用

    这篇文章主要为大家详细介绍了Android实现简单C/S聊天室应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • android通过jxl读excel存入sqlite3数据库

    android通过jxl读excel存入sqlite3数据库

    本文主要介绍了android通过jxl去读excel的内容,然后存入sqlite3数据库表,需要用到jxl的jar包和sqlite 的jar包,图片是excel的数据格式,需要的朋友可以参考下
    2014-03-03
  • Android中通过MediaStore获取音乐文件信息方法

    Android中通过MediaStore获取音乐文件信息方法

    这篇文章主要介绍了Android中通过MediaStore获取音乐文件信息方法,本文讲解了获取歌曲的名称、歌曲的专辑名、歌曲的歌手名、歌曲文件的全路径、歌曲文件的名称、歌曲文件的发行日期等音乐文件信息的方法,需要的朋友可以参考下
    2015-04-04
  • Android获取验证码倒计时显示效果

    Android获取验证码倒计时显示效果

    这篇文章主要为大家详细介绍了Android获取验证码显示的两种简单实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 2013年 移动App设计13项注意细节总结

    2013年 移动App设计13项注意细节总结

    在过去的一年里,移动成主流也让众多的移动应用如雨后春笋般层出不穷,在众多开发者从中获利的同时竞争也愈演愈烈,如何才能保证自己立于不败之地接下来介绍移动App设计的13大精髓感兴趣的朋友可以了解下啊
    2013-01-01
  • android 把float转换成Int的实例讲解

    android 把float转换成Int的实例讲解

    今天小编就为大家分享一篇android 把float转换成Int的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-07-07
  • Android使用Recyclerview实现图片水平自动循环滚动效果

    Android使用Recyclerview实现图片水平自动循环滚动效果

    这篇文章主要为大家详细介绍了Android使用Recyclerview实现图片水平自动循环滚动效果,实现精彩的跑马灯效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 利用Kotlin实现破解Android版的微信小游戏--跳一跳

    利用Kotlin实现破解Android版的微信小游戏--跳一跳

    这篇文章主要给大家介绍了关于利用Kotlin实现破解Android版微信小游戏--跳一跳的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-12-12

最新评论