Android 使用PDF.js浏览pdf的方法示例
作者:Wang_Yi 发布时间:2021-12-08 06:11:41
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
来源:https://www.jianshu.com/p/fec41669acbb


猜你喜欢
- 这篇文章主要介绍了Mybatis 缓存原理及失效情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的
- 本文实例讲述了Hibernate环境搭建与配置方法。分享给大家供大家参考,具体如下:1.下载hibernate jar包:hibernate
- C#动态webservice调用接口using System;using System.Collections;using System.I
- 高分配速率(High Allocation Rate)分配速率(Allocation rate)表示单位时间内分配的内存量。通常使用&nbs
- 本文为大家分享了使用静态关键字实现单例模式的具体代码,供大家参考,具体内容如下单例模式:只能获得某个类的唯一一个实例单例模式,不管什么时间点
- 一、先明确几个基本概念1、伪随机数:pseudo-random number generators ,简称为:PRNGs,是计算机利用一定的
- 一、代码结构:二、数据实体类:using System;using System.Collections.Generic;using Sys
- 开发中对版本进行检查并更新的需求基本是所有应用必须有的功能,可是在实际开发中有些朋友就容易忽略一些细节。版本更新的基本流程:一般是将本地版本
- 本文实例为大家分享了Android Studio实现简单计算器功能的具体代码,供大家参考,具体内容如下程序步骤:(1)在布局文件定义一些计算
- SpringBoot读取外置logback配置文件springboot项目可以读取外置配置文件,避免了修改配置文件需要重新打包部署的问题。部
- private InetAddress getBroadcastAddress() throws IOException { WifiMan
- 如今,手机应用渗透到各行各业,数量难以计数,其中大多数应用都会使用到网络,与服务器的交互势不可挡,那么android当中访问网络有哪些方式呢
- 1 简介IDEA的全称是IntelliJ IDEA,这是一个java编程语言开发的集成环境。IDEA的每一个方面都是为了最大限度地提高开发人
- 利用mybtis插件打印完整的sql,将占位符?替换成实际值import org.apache.ibatis.cache.CacheKey;
- 为什么写?今天去上班的公交上,有朋友在张队(张善友)的微信群里,发了一个介绍C# 6.0新特性的视频,视频7分钟,加上本人英语实在太low,
- 最近尝试做了个listview的多选demo,网上看其他人的例子感觉不是很难,自己动手做了下,各种细节问题,没那么简单啊。既然做了,简单写个
- 使用idea进行JavaWeb开发时,在前端与后台交互常常出现乱码问题,包括日志/控制台输出乱码,参数乱码等问题,归根结底是编码格式不对,解
- 最近这款“跳一跳”很火,在段子里面看到有人才放了张画着坐标的纸在手机上,说根据
- 创建一个脚本,输入下面的代码。脚本不需要添加到任何物体上,globle变量可以跨场景全局调用。using System.Collection
- 本文实例讲述了C#数字图像处理之图像二值化(彩色变黑白)的方法。分享给大家供大家参考。具体如下://定义图像二值化函数private sta