Android中显示PDF的问题解决(安卓端使用pdf.js CDN模式)

2024-02-18 17:32

本文主要是介绍Android中显示PDF的问题解决(安卓端使用pdf.js CDN模式),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言:昨天接到一个需求,需要在Android端展示一个PDF文件,IOS那边很方便,只需要使用WebView即可,而安卓就不行,也查阅了部分资料,接下来我将解决问题的过程和最终采用的方案记录下来。

评论里反馈存在文件大小超过3M左右会出现OOM问题,目前暂未解决

还记得在上一家公司也做过展示PDF文件,而且文件比我现在要做的需求大得多,一般是5M以上,在上一家公司使用的是AndroidPdfViewer,但是这种方法的缺点很明显,就是增大APK的体积,需要加载.so文件。所以我就想使用其他的方法,然后看到了一个链接:Android 实现 PDF 文件阅读功能调研,我们来分析一波各种方案:

  1. WebView 中调用 GoogleDocs
    这个方案缺点很明显,要翻墙!

  2. 调起第三方支持 PDF 阅读的应用
    同样缺点明显,需要用户手机安装PDF的应用才行,局限性太大。

  3. 集成第三方 PDF SDK,在 Native 页面中阅读
    这个在前面说了,APK体积会增大很多,不介意APK体积的可以采用。

  4. 将 PDF 文件转换成 HTML 或者图片等格式文件
    这种方案是通过服务端将PDF文件转换成其他可以在WebView中展示的格式,所以也不采用。

  5. 集成第三方JS,也是本文要介绍的方案。
    这种方案有两种方式集成:服务端和客户端,因为我本身就是打算在我客户端做,所以直接介绍客户端集成的方案,和在集成过程中遇到的问题和解决:
    首先,客户端集成也有两种方式,一是将pdf.js和相关的文件全部下载下来并拷贝的工程中的assets目录,同时编写一个html文件放入assets目录,由于pdf.js和相关文件体积也比较大,同样会增加APK体积,所以不采用,,但是这种方式较第二种加载更快,全部都是本地资源,不需要每次都联网加载pdf.js文件。二就是使用CDN的方式。

开始集成
编写一个show_pdf.html和show_pdf.js文件放入工程的assets目录:
示例

show_pdf.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="show_pdf.js"></script>
</head>
<body>
</body>
</html>

show_pdf.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)}
});

show_pdf.js文件中的 var viewport = page.getViewport(2.0); 是为了解决某些机型预览的时候显示模糊的问题;PDFJS.cMapUrl = 'https://unpkg.com/pdfjs-dist@1.9.426/cmaps/'; PDFJS.cMapPacked = true;是为了解决PDF内容显示不完整的问题。

show_pdf.html文件中就将PDF.js链入了html中:<script src="https://unpkg.com/pdfjs-dist@1.9.426/build/pdf.min.js"></script>

展示PDF文件
首先将PDF下载到本地,然后通过WebView.loadUrl("file:///android_asset/show_pdf.html?"+文件URL);,文件URL可通过 File.toURI().toURL() 获得。

效果图
效果图

遇到的问题
1、WebView加载时控制台报错:Faild load file:你要展示的文件路径,这是因为WebView默认不允许加载本地文件,添加代码:WebView.getSettings().setAllowUniversalAccessFromFileURLs(true);即可。

2、缩放问题,我运行上去发现图片中文字太小,需要放大才能看,但是界面却不能缩放,解决办法:(1)WebView设置:mWebView.getSettings().setSupportZoom(true); mWebView.getSettings().setBuiltInZoomControls(true); mWebView.getSettings().setDisplayZoomControls(true);
(2)show_pdf.html 文件修改:<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=4.0,user-scalable=yes"/>

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



以下内容更新于:2019-10-30 17点54分

有道友私信我,说按照我的步骤使用pdfjs最新版本2.x时WebView展示一片空白,但是使用我文章中的版本webview滑动非常不顺畅,然后我闲下来之后也把自己项目中的pdfjs版本改成最新的,确实是一片空白,于是我开始寻找解决办法,最后还是让我在pdf.js官网中找到了解决方案,接下来我描述一下我的解决思路,想看结果的直接跳到最下面吧:

在我文章中的html、js文件中可以看到使用的均是 1.9.426 版本,当我把这两个文件都改成 2.3.200 版本之后,从AS的logcat中打印出了报错:

"Uncaught ReferenceError: PDFJS is not defined", source: file:///android_asset/show_pdf.js (3)

从报错中可以知道是show_pdf.js的第三行,PDFJS未找到,第一步我通过链接(pdfjs-dist版本目录)过去找到版本目录下有许多文件,但是从里面的文件没有找到解决办法,然后我度娘找到pdf.js官网:PDF.js github ,页面如下:
在这里插入图片描述
打开demo搜寻一番无果,然后看到顶部有一个Examples,点开之后我觉得我应该是找到了解决办法:
在这里插入图片描述
第一个红框处可以看到调用 getDocument 的对象是 pdfjsLib ,我立即将js文件中的 PDFJS 替换掉,再次运行后,pdf文件顺利展示,但是locat控制台仍有报错:

"Deprecated API usage: PDFDocumentLoadingTask.then method, use the `promise` getter instead.", source: https://unpkg.com/pdfjs-dist@2.3.200/build/pdf.min.js (1)"Deprecated API usage: getViewport is called with obsolete arguments.", source: https://unpkg.com/pdfjs-dist@2.3.200/build/pdf.min.js (1)

Android开发应该对 Deprecated 这个不陌生,Android sdk中很多方法因为库更新后都会被废弃掉,所以我们可以看上面截图中的第2、3个红框处,我们按照当中的方式进行修改:

//第一处修改
var viewport = page.getViewport({scale:2.0});//第二处修改
pdfjsLib.getDocument(url).promise.then

再次运行上去,就没有报错了。
将版本更新后的两个文件完整代码如下:

show_pdf.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=2.0,user-scalable=yes"/><title>PDF查看</title><style type="text/css">canvas {width: 100%;height: 100%;border: 1px solid black;}</style><script src="https://unpkg.com/pdfjs-dist@2.3.200/build/pdf.min.js"></script><script type="text/javascript" src="show_pdf.js"></script>
</head>
<body>
</body>
</html>

show_pdf.js

var url = location.search.substring(1);pdfjsLib.cMapUrl = 'https://unpkg.com/pdfjs-dist@2.3.200/cmaps/';
pdfjsLib.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({scale:2.0});var canvas = createPage();var ctx = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;page.render({canvasContext: ctx,viewport: viewport});});
}pdfjsLib.getDocument(url).promise.then(function (pdf) {pdfDoc = pdf;for (var i = 1; i <= pdfDoc.numPages; i++) {renderPage(i)}
});
这次的问题解决告诉自己,解决问题要多思考,多参考前人的经验,也要多总结,也希望这篇文章能帮助到大家**

这篇关于Android中显示PDF的问题解决(安卓端使用pdf.js CDN模式)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/721906

相关文章

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

关于MongoDB图片URL存储异常问题以及解决

《关于MongoDB图片URL存储异常问题以及解决》:本文主要介绍关于MongoDB图片URL存储异常问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录MongoDB图片URL存储异常问题项目场景问题描述原因分析解决方案预防措施js总结MongoDB图

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

最详细安装 PostgreSQL方法及常见问题解决

《最详细安装PostgreSQL方法及常见问题解决》:本文主要介绍最详细安装PostgreSQL方法及常见问题解决,介绍了在Windows系统上安装PostgreSQL及Linux系统上安装Po... 目录一、在 Windows 系统上安装 PostgreSQL1. 下载 PostgreSQL 安装包2.

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum(枚举)是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚

Nginx location匹配模式与规则详解

《Nginxlocation匹配模式与规则详解》:本文主要介绍Nginxlocation匹配模式与规则,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、环境二、匹配模式1. 精准模式2. 前缀模式(不继续匹配正则)3. 前缀模式(继续匹配正则)4. 正则模式(大

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

usb接口驱动异常问题常用解决方案

《usb接口驱动异常问题常用解决方案》当遇到USB接口驱动异常时,可以通过多种方法来解决,其中主要就包括重装USB控制器、禁用USB选择性暂停设置、更新或安装新的主板驱动等... usb接口驱动异常怎么办,USB接口驱动异常是常见问题,通常由驱动损坏、系统更新冲突、硬件故障或电源管理设置导致。以下是常用解决