都知道，Android本身的webview是不支持pdf加载的（比不上iOS的webview，谁让人家NB呢），因此通过连接Google的一个服务器转换成功后返回给WebView显示。但是，但是，但是呢，大家都懂的，天朝和Google之间有一道高高的墙。方法还是贴出来，作为国际化APP的一种方案。

今天我们使用的是pdf.js来实现，经过一番对比，我还是选择了Moliza开源的Pdf.js。

 1 1. Mozilla PDF.js

 2 什么是PDF.js

 3 PDF.js、pdf.js是一款使用HTML5 Canvas安全地渲染PDF文件以及遵从网页标准的网页浏览器渲染PDF文件的JavaScript库。

 4

 5 简介

 6 PDF.js是一个使用HTML5构建的PDF查看器。由社区驱动并得到Mozilla Labs的支持。该项目的目标是创建一个通用的、基于Web标准的平台来实现PDF文件的解析与展示。

 7

 8 提到Mozilla基金会，大家最熟悉的可能就是Firefox了，是的，它是一个非常有名的开源组织，其作品火狐浏览器深受全球大量用户的喜爱（虽然近期的版本不是那么给力）。而今天的主角PDF.js也是该组织的作品，Github上高达25K的stars充分说明该项目所受的关注度和该组织的号召能力。

 9

10 集成

11 首先明确说明一点，我们可以让后端服务器集成PDF.js，然后进行一下跳转，这样App端直接通过WebView进行访问就能预览PDF了，但显然这跟今天的主题关系不大，就不细说了（实际上也没啥要细说的，都是后端的活儿），只说Android端的使用。

12

13 首先，下载PDF.js的全部源码，包括一些图片资源、css文件等。可以下载最新的release包，也可以直接下载master分支，反正基本上都没有严重的问题，求稳就选择release版本吧。然后解压到一个目录中并给一个合适的命名，这里我把这个目录命名为pdf_js。然后把这个目录及所有的文件都复制到App的assets目录下。OK，集成工作就算是完成了，下面就是具体的使用了。

Mozilla PDF.js

webview配置setting 

public void initView() {

        WebSettings webSettings = pdfViewerWeb.getSettings();

        webSettings.setJavaScriptEnabled(true);

        webSettings.setPluginState(WebSettings.PluginState.ON);

        webSettings.setAllowContentAccess(true);

        webSettings.setAllowFileAccess(true);

        webSettings.setAllowFileAccessFromFileURLs(true);

        /**

         * 简单来说，该项设置决定了JavaScript能否访问来自于任何源的文件标识的URL。

         * 比如我们把PDF.js放在本地assets里，然后通过一个URL跳转访问来自于任何URL的PDF，所以这里我们需要将其设置为true。

         * 而一般情况下，为了安全起见，是需要将其设置为false的。

         */

        webSettings.setAllowUniversalAccessFromFileURLs(true);

    }

webview配置setting

二 实现方式

方式一: 使用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>

index.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)

  }

});

index.js

3.WebView加载html

 mWebView.loadUrl("file:///android_asset/index.html?" + pdfUrl);

三 遇到的问题

在直接实现预览的时候遇到显示模糊的问题，通过增大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：

自定义预览界面：

 

转自：https://www.it610.com/article/1280611663862579200.htm

https://juejin.cn/post/7017840637450043422

https://zhuanlan.zhihu.com/p/439564183

https://www.jb51.net/article/136364.htm

Android加载PDF方案（pdf.js，支持缩放）的更多相关文章

  1. Android 加载gif图片强大框架(支持预加载、缓存，还支持显示静态图片，一行代码全搞定)

    之前项目中没有涉及到显示gif图片的功能,也没有着重研究过,最近项目中要用到显示gif图片,于是就在网上一顿搜,用过之后发现如下几个缺点. 1.加载大的gif图片会出现oom. 2.没有预加载和缓存功 ...

  2. Android热修复（动态加载）方案汇总

    整理了以下动态加载的方案,便于在项目中使用时查阅: Dexposed github (https://github.com/alibaba/dexposed) AndFix github (https ...

  3. WebView加载本地html、js文件常见问题及解决办法

    声明:基于android studio平台,php语言搭建服务器 目录: 一.JavaScript脚本语言没有反应 二.alert无法弹出 三.html页面之间不能跳转 四.屏幕缩放没有达到预期效果 ...

  4. Quick-Cocos2d-x v3.3 异步加载Spine方案 转

    Quick-Cocos2d-x v3.3 异步加载Spine方案 浩月难求也与2015-03-25 15:06:3441 次阅读 背景 项目中使用了Quick-Cocos2d-x 3.3,由于Spin ...

  5. 解决HTML加载时，外部js文件引用较多，影响页面打开速度问题

    解决HTML加载时,外部js文件引用较多,影响页面打开速度问题   通常HTML文件在浏览器中加载时,浏览器都会按照<script>元素在页面中出现的先后顺序,对它们依次加载,一旦加载的j ...

  6. Android学习笔记_51_转android 加载大图片防止内存溢出

    首先来还原一下堆内存溢出的错误.首先在SD卡上放一张照片,分辨率为(3776 X 2520),大小为3.88MB,是我自己用相机拍的一张照片.应用的布局很简单,一个Button一个ImageView, ...

  7. Android加载/处理超大图片神器！SubsamplingScaleImageView(subsampling-scale-image-view)【系列1】

    Android加载/处理超大图片神器!SubsamplingScaleImageView(subsampling-scale-image-view)[系列1] Android在加载或者处理超大巨型图片 ...

  8. 网站顶部显示预加载进度条preload.js

    网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery. ...

  9. React-Native 之 GD （二十）removeClippedSubviews / modal放置的顺序 / Android 加载git图\动图 / 去除 Android 中输入框的下划线 / navigationBar

    1.removeClippedSubviews 用于提升大列表的滚动性能.需要给行容器添加样式overflow:’hidden’.(Android已默认添加此样式)此属性默认开启 这个属性是因为在早期 ...

  10. android加载大量图片内存溢出的三种方法

    android加载大量图片内存溢出的三种解决办法 方法一:  在从网络或本地加载图片的时候,只加载缩略图. /** * 按照路径加载图片 * @param path 图片资源的存放路径 * @para ...

随机推荐

  1. [转帖]shell脚本使用expect自动化交互登录远程主机进行批量关机

    前文 1.目标主机登录用户都为root,且密码一致 2.目标主机开放启动了SSH服务且22号端口可访问(防火墙未进行拦截) 软件介绍 expect Expect是一个用来实现自动和交互式任务进行通信的 ...

  2. [转帖]Linux中find命令使用示例

    https://zhuanlan.zhihu.com/p/99170116 Linux查找命令是类Unix操作系统中最重要且最常用的命令行实用程序之一. 查找命令可以根据你设定的参数匹配的文件指定的条 ...

  3. FIO的再学习-不同Raid,不同磁盘性能验证

    FIO的再学习-不同Raid性能验证 背景 发现自己对iodepth的和num_jobs的理解存在偏差 找了一些资料才发现自己很多地方做的不对. 这里找到一个新资料可以进行模拟数据库的测试 测试配置文 ...

  4. 【转帖】10个Linux 系统性能监控命令行工具

    引言: 系统一旦跑起来,我们就希望它能够稳定运行,不要宕机,不出现速度变慢.因此,对于Linux 系统管理员来说每天监控和调试 Linux 系统的性能问题是一项繁重却又重要的工作.监控和保持系统启动并 ...

  5. 【转帖】python 安装whl文件

    前言 WHL文件是以Wheel格式保存的Python安装包,Wheel是Python发行版的标准内置包格式.在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的p ...

  6. 【转帖】Linux创建软连接出现的错误及解决方法

    问题: 创建软连接以后,使用cd 软连接路径显示没有那个文件或目录. 创建过程及切换结果,如图: 原因: 路径一定要写成绝对路径!!! 解决办法: 了解创建软连接的命令: ln -s 源文件 目标文件 ...

  7. [转帖]011 Linux 打包与解压 tar

    https://my.oschina.net/u/3113381/blog/5429977 01 压缩.打包命令有哪些? Linux 上有着各种压缩.打包的工具:tar.gzip.zip.7z,而 t ...

  8. 获取特定端口java进程的路径的shell脚本

    获取特定端口java进程的路径的shell脚本 ll /proc/`lsof -i:5200 |grep ^java |awk '{print $2}' |uniq` |grep cwd |cut - ...

  9. 兼容微信支付宝抖音小程序的工具推荐！还能将小程序搬到自己的app里面

    事情的起因是这样的. 之前在微信.支付宝和抖音开放平台都上架了自己的小程序,虽然几个平台有自己的开发标准,但是都是基于 JavaScript 这种已经被广泛使用的编程语言进行开发的,对于开发者而言学习 ...

  10. Docker与虚拟化技术浅析第一弹之docker与Kubernetes

    1 前言 Docker是一个开源的引擎,可以轻松地为任何应用创建一个轻量级的. 可移植的.自给自足的容器.开发者在笔记本电脑上编译测试通过的容器可以批量地在生产环境中部署,包括VMs (虚拟机).ba ...