Android加载PDF方案(pdf.js,支持缩放)

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

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

所以得借助第三方的库来实现,这里推荐几个第三方的库:

  • Github上有一个Java开源项目 https://github.com/barteksc/AndroidPdfViewer ,
    这个库的大致原理,是内置了一个PDF解析器,以流的方式将网络PDF从网上Down下来,然后再以流的方式将其还原成PDF展示出来(具体细节没关注)。亲测中,这个库每次进入webview页面都会解析加载一遍PDF,如果PDF过大,费时无缓存不说,最致命的问题乃是,

    APK包体积会瞬间增大15M左右,
    具体原因不明,估计应该是内置PDF解析器的问题。于是,此方法被我抛弃了。

  • 使用Moliza开源的Pdf.js

    这个JS类库也是很强大的,配合原生的WebView使用,支持预览,缩放,翻页的功能,实现效果和WKWebView没差。同样也有体积问题,全部放到本地apk的话包大小差不多会增加5M左右。但相比上一种方式还是轻量一些:

  • PDFium:Google 和 Foxit 合作开源的 Foxit 的 PDF 源码,作为 Chrome 浏览器的 PDF 渲染引擎组件,当然这是 C/C++ 实现的;
  • PdfiumAndroid:mshockwave 基于 PDFium 基础上适配 Android 平台的函数库;
  • AndroidPdfViewer:barteksc 基于 PdfiumAndroid 基础上实现的一个 PDF 阅读 Demo,支持常见的手势,缩放,双击等效果。
  • MuPDF: 一个轻量级的 开源 PDF 和 XPS 查看器

使用方法,GitHub上都有,这里不再多说。今天我们使用的是pdf.js来实现,经过一番对比,我还是选择了Moliza开源的Pdf.js。

1. Mozilla PDF.js

什么是PDF.js

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

  • 简介

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

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

  • 集成

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

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

下载地址
pdf.js文件

github地址

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);

    }

加载本地PDF文件:

webView.loadUrl(“file:///android_asset/pdf_js/web/viewer.html?file=file://” + path);

加载在线PDF文件:

webView.loadUrl(“file:///android_asset/pdf_js/web/viewer.html?file=” + url);

这里我在网上找了一个在线PDF文件的地址,然后兴奋的加载一下,搓搓手等待着成功加载,结果却会发现这样的错:Android加载PDF方案(pdf.js,支持缩放)_第1张图片

看起来意思好像是说,文件源与viewer的源不符合,这是啥情况?来查看一下viewer.js的代码,找到报错的地方,是在一个名为validateFileURL的函数里。

var validateFileURL = void 0;
{
  var HOSTED_VIEWER_ORIGINS = ['null', 'http://mozilla.github.io', 'https://mozilla.github.io'];
  validateFileURL = function validateFileURL(file) {
    if (file === undefined) {
      return;
    }
    try {
      var viewerOrigin = new _pdfjsLib.URL(window.location.href).origin || 'null';
      if (HOSTED_VIEWER_ORIGINS.includes(viewerOrigin)) {
        return;
      }
 
      var _ref14 = new _pdfjsLib.URL(file, window.location.href),
          origin = _ref14.origin,
          protocol = _ref14.protocol;
 
      if (origin !== viewerOrigin && protocol !== 'blob:') {
        throw new Error('file origin does not match viewer\'s');
      }
    } catch (ex) {
      var message = ex && ex.message;
      PDFViewerApplication.l10n.get('loading_error', null, 'An error occurred while loading the PDF.').then(function (loadingErrorMessage) {
        PDFViewerApplication.error(loadingErrorMessage, { message: message });
      });
      throw ex;
    }
  };
}

定义了一个HOSTED_VIEWER_ORIGINS数组,里面预置了一些主机源。如果viewer所在主机在这个合法数组里,则不进行后续检查,否则进行同源检查,一旦发现是跨域,就会抛出file origin does not match viewer的错误了。显然这么做是为了安全考虑,毕竟有大量的网站提供的在线预览PDF功能就是依赖的PDF.js。不过对于我们Android来说,是部署在设备端而不是服务端,所以简单的把这个函数的调用注释掉,或者在开头添加一个允许跨域的开关:

var allowCrossDomain = true;

然后在调用validateFileURL的地方添加一个判断:

if (!allowCrossDomain) {
  validateFileURL(file);
}

再次运行:

Android加载PDF方案(pdf.js,支持缩放)_第2张图片

大功告成!等等,怎么手势缩放不管用。。。。。

好像webview没有配置缩放,加上:

//支持缩放
mWebView.getSettings().setBuiltInZoomControls(true);
mWebView.getSettings().setSupportZoom(true);
mWebView.getSettings().setDisplayZoomControls(false);//不显示缩放按钮

再运行,还是不行,啊。。。。。

原来我们是pdf.js是支持自定义界面的,而我们的现在展示的界面正是view.html和view.js。

看看view.html页面发现这么一句话.

content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

原来忘记修改html了,现在再来修改下html页面的属性。

content="width=device-width,initial-scale=1.0,maximum-scale=4.0,user-scalable=yes"

最大倍数4,最小1,支持缩放。

width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=0.5:表示最小的缩放比例
maximum-scale=4.0:表示最大的缩放比例
user-scalable=yes:表示用户是否可以调整缩放比例

 再次运行就支持了缩放了。

你可能感兴趣的:(PDF加载)