Android 使用PDF.js浏览pdf的方法示例
Android的WebView做不到ios的WebView那样可以很方便的直接预览pdf文件。要实现利用WebView预览pdf我们可以使用谷歌文档服务：
mWebView.loadUrl("http://docs.google.com/gviewembedded=true&url=" + pdfUrl);
这种方式国内网络环境是不用考虑的。当然也有替代的方案：我们可以使用mozilla开源的PDF.js。
一 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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
您可能感兴趣的文章:
- Android webview转PDF的方法示例
- Android实现pdf在线预览或本地预览的方法
- Android 如何本地加载pdf文件
- Android 下载并打开PDF,Doc,Dwg文档实例
- Android 打开网络上pdf文件
- Android 打开本地pdf文件
- Android pdf viewer在android studio应用问题说明详解
相关推荐
-
Android webview转PDF的方法示例
1.网上找了好多没有显示出来效果不错,后来看到调用手机打印预览,看了效果还不错,就打算使用系统打印服务预览下载 2.'webView.createPrintDocumentAdapter()'得到打印的PrintDocumentAdapter有了该类就可以使用onWrite方法写入制定的文件,但是这个方法需要传入回调这个悲剧的是这个回调方法是hiden的我们没办法调用 3,字怎么解决呢,有连个方法 3.1 使用此开源库替换自己的sdk 中的android.jar文件,就可以使用了 https:/
-
Android pdf viewer在android studio应用问题说明详解
之前一直是做.NET开发的,最近需要弄一个新闻app,能力有限,只能借助HTML5 WebAPP+android studio来完成这项工作. android studio主要用WebView来加载发布好的WebApp,打包生产APP. 其中由于显示一些pdf文档,所以研究了一下,记录一下心得,同时也希望帮助到新手们. android 显示网络pdf,基本原理:先将pdf文件通过DownloadManager下载到手机sdk某个文件夹中,然后通过android-pdf-viewer插件进行显示.
-
Android 打开本地pdf文件
Android 中打开pdf文件也是一种很常见的场景,但是上网找了好多资料,有用WebView加载的,但是要用vpn才能搞,最后发现一个库挺不错的,再次分享给大家 android-pdfview.下面主要说一下该库的使用方法. 1. 该库的下载地址 https://github.com/JoanZapata/android-pdfview 源码下载:http://xiazai.jb51.net/201704/yuanma/android-pdfview-master_jb51.rar 2. an
-
Android 如何本地加载pdf文件
大部分app打开pdf文件是通过intent调起手机中能打开pdf文件的工具,来查看pdf文件,如果需求是,用户在app内下载好pdf文件后,不通过第三方的工具,本地打开. 这样的需求要怎么实现呢?上网查了一些资料,发现了一个很好用PDF开源库. 使用起来也很简单,首先添加PDFView的引用 compile 'com.github.barteksc:android-pdf-viewer:2.4.0' 布局中引用PdfView <LinearLayout xmlns:android="ht
-
Android实现pdf在线预览或本地预览的方法
最近项目中需要使用在线预览pdf,并要能实现自动播放,我想这样的需求无论如何来说都是很操蛋的 由于本人水平有限,最后讨论将项目需求改成将pdf下载到本地再实现自动播放. 接下来总结下目前能够实现pdf阅读的方案,开发当中需要根据实际需求去选择相应的方案. 1.使用Google doc支持来展示word,excel,pdf,txt(WebView方式在线预览): <span style="font-size:18px;">WebView urlWebView = (WebVi
-
Android 打开网络上pdf文件
之前写过一篇Android打开本地pdf文件的文章,最后总结的时候说,后面一定要拓展库,让其也能打开网络的的pdf文件.今天终于可以兑现承诺了.frok一份代码https://github.com/JoanZapata/android-pdfview,源码地址:http://xiazai.jb51.net/201704/yuanma/android-pdfview-master_jb51.rar,开始改造一番. 1.基本思路: 打开网络pdf 思路整体还是来源与图片的加载. android中加载
-
Android 下载并打开PDF,Doc,Dwg文档实例
今天项目中遇到这样一个需求 ,根据后台接口里pdf,doc,dwg文档的地址 是一个URL ,需要根据文档的url 下载到本地(内部存储或内存卡)并用手机中能打开该文档的软件弹出来并打开,(这里需要做一个缓存,第一次查看这个文档是在服务器上下载并打开,以后打开不需要下载直接打开本地的文档)在网上找了些资料 写了以下代码,下面分享给大家; 效果图: 代码: 这是一个单独的类 首先接收intent传过来的url我是用url的后14位作为存储本地的文件名(这里根据自己服务器的文件命名规则而定) 拿到文
-
Android 使用PDF.js浏览pdf的方法示例
Android的WebView做不到ios的WebView那样可以很方便的直接预览pdf文件.要实现利用WebView预览pdf我们可以使用谷歌文档服务: mWebView.loadUrl("http://docs.google.com/gviewembedded=true&url=" + pdfUrl); 这种方式国内网络环境是不用考虑的.当然也有替代的方案:我们可以使用mozilla开源的PDF.js. Github mozilla 官方demo 一 WebView设置:
-
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
实现效果 可用插件介绍 Mozilla 提供了 PDF.js和pdfjs-dist,两者的区别如下: PDF.js ,一个完整的 PDF 查看器,可以直接使用其提供的 viewer.html 查看 PDF 内容,包含完整样式和相关功能.优点是快速集成,不需要自己实现查看器的功能和样式.缺点是如果要自定义样式和功能,反而会很麻烦. pdfjs-dist ,PDF.js 的预购建版本,只包含 PDF 内容的渲染功能,需要自己实现查看器的样式和相关功能. Vue 官方插件库 Awesome Vue.j
-
Java读取PDF中的表格的方法示例
目录 一.概述 二.环境配置 1. 手动导入 2. Maven仓库下载导入 三.读取PDF中的表格 一.概述 本文以Java示例展示读取PDF中的表格的方法.这里导入Spire.PDF for Javah中的jar包,并使用其提供的相关及方法来实现获取表格中的文本内容.下表中整理了本次代码使用到的主要类.方法及解释,供参考: 类型 描述 PdfDocument Class Represents a pdf document model. PdfDocument. loadFromFile (s
-
使用Vue3+PDF.js实现PDF预览功能
目录 1 前言 2 PDF 预览测试 2.1 下载 PDF.js 2.2 window.open 直接打开 2.3 弹框形式打开 3 修改配置项 3.1 修改主题色为暗色系 3.2 修改默认语言为简体中文 3.3 打开 PDF 后默认跳转到某一页 4 移除部分按钮 4.1 简单按钮移除 4.2 复杂按钮移除 5 错误处理 5.1 跨域报错 5.2 默认语言为简体中文,但下载按钮仍显示为“Save” 总结 1 前言 PDF.js 官网 本文使用的 PDF.js 版本为:v3.0.279 本文未使用
-
Android编程实现文件浏览功能的方法【类似于FileDialog的功能】
本文实例讲述了Android编程实现文件浏览功能的方法.分享给大家供大家参考,具体如下: 最近正在弄上传文件,当时想怎么能实现fileDialog的功能呢,打开文件,浏览文件,然后选择文件呢,查了好多资料,也看了不少论坛,都说里面没有这个功能,那真是奇怪了,里面没有这个功能,当然就需要自己动手添加这个功能了. 首先说一下这个文件浏览的简单实现原理: 首先选择一个目录做为根目录,然后打开此目录,常用的就是使用File这个类了,如下: File file=new File(path); 然后可以通过
-
Nest.js 授权验证的方法示例
0x0 前言 系统授权指的是登录用户执行操作过程,比如管理员可以对系统进行用户操作.网站帖子管理操作,非管理员可以进行授权阅读帖子等操作,所以实现需要对系统的授权需要身份验证机制,下面来实现最基本的基于角色的访问控制系统. 0x1 RBAC 实现 基于角色的访问控制(RBAC)是围绕角色的特权和定义的策略无关的访问控制机制,首先创建个代表系统角色枚举信息 role.enum.ts: export enum Role { User = 'user', Admin = 'admin' } 如果是更复
-
node.js遍历目录的方法示例
本文介绍了node.js遍历目录的方法示例,分享给大家,也给自己留个笔记,具体如下 同步遍历 const fs = require('fs'); const path=require('path'); function travel(dir,callback){ fs.readdirSync(dir).forEach((file)=>{ var pathname=path.join(dir,file) if(fs.statSync(pathname).isDirectory()){ travel
-
Android flutter Dio锁的巧妙实现方法示例
正文 看Dio库源码的时候,发现其拦截器管理的逻辑处用到了一个Lock,这个Lock巧妙地利用了Completer和Future的机制来实现,记录一下. /// Add lock/unlock API for interceptors. class Lock { Future? _lock; late Completer _completer; /// 标识拦截器是否被上锁 bool get locked => _lock != null; /// Lock the interceptor. /
-
Android webview和js互相调用实现方法
Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的.而H5具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以,App和H5页面相结合就显得尤为重要.而android和H5都不可能每次都是独立存在的,而是相互影响也相互的调用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5
-
Android webview和js互相调用实现方法
Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的.而H5具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以,App和H5页面相结合就显得尤为重要.而android和H5都不可能每次都是独立存在的,而是相互影响也相互的调用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5