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

都知道,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

posted on 2022-10-14 15:53  腾逸  阅读(2673)  评论(0编辑  收藏  举报