cordova程序加载pdf文件的2种方法(ios/android)
前言
公司目前的前端架构是微信端由vue全家桶负责h5网站的单页应用,android端和ios端则选择cordova打包成apk和app。其中,有一个业务逻辑是点击某个链接进入pdf的展示,h5的方案是使用vue-pdf,h5网站运行良好。可是,等到打包成apk时却显示不出来。cordova程序加载pdf文件并不是那么轻松。
目录
1.使用inappbrowser(适合ios)
2.cordova-plugin-file-opener2(android)
1.使用inappbrowser(适合ios)
参考: Linking to PDFs in cordova apps。
ios原生的支持pdf的浏览,所以我们只要完成pdf显示和返回页面(完成按钮)这个流程就好了。注意,提到返回页面,因为直接通过链接的方式显示PDF,会导致无法返回页面。比如下面的例子。
显示pdf但无返回的做法:
1 <p>
2 <a href="pdf/fund.pdf">Regular Ole Link</a>
3 //不安装任何插件,直接a标签打开
4 </p>
5 <p>
6 <button id="loadPDF1">document.location.href</button>
7 //
8 </p>
9
10 //js部分
11 document.addEventListener('deviceready', init, false);
12 function loadPDF1() {
13 console.log('loadPDF1');
14 document.location.href='pdf/fund.pdf';
15 }
正确方案:使用inappbrowser(适合ios)
1.安装inappbrowser
cordova plugin add cordova-plugin-inappbrowser
参考:cordova-plugin-inappbrowser
2.js部分
document.addEventListener('deviceready', init, false);
function init() {
document.querySelector('#loadPDF2').addEventListener('touchend',
loadPDF2,false);
}
function loadPDF2() {
console.log('loadPDF2');
var ref = cordova.InAppBrowser.open('pdf/fund.pdf', '_blank', 'location=no');
}
ios测试截图:
额外的一些些话(对vue项目不感兴趣的可以skip咯):
//Vue项目
//正确示范
if(this.ios==true){
if(cordova){
var ref =cordova.InAppBrowser.open('assets/foo.pdf', '_blank', 'location=no');
}
}
//错误示范
if(this.ios==true){
//这个时候运行vue项目报错,Uncaught ReferenceError: cordova is not defined
//明明this.ios这个if语句的代码在vue项目并没有进这个分支,那么如何知道cordova呢
//答案是变量提升。不理解,自行百度哦。
var ref =cordova.InAppBrowser.open('assets/foo.pdf', '_blank', 'location=no'); }
2.cordova-plugin-file-opener2(适合android)
android原生并不支持pdf浏览。那么使用fileopener2。
参考: Linking to PDFs in cordova apps。
首先,[root]/config.xml添加内容,安装file-opener2和cordova-plugin-file。
命令为:
cordova plugin add cordova-plugin-file cordova plugin add cordova-plugin-file-opener2@1.0.11
[root]/config.xml:
<plugin name="cordova-plugin-file" spec="^6.0.1" />
<plugin name="cordova-plugin-file-opener2" spec="1.0.11" />
然后,要求android target为23。
最后,贴代码如下:
<div> <button id="btn">打开PDF</button> </div>
<script type="text/javascript" src="cordova.js"></script>
<script>
document.addEventListener('deviceready', init,false);
function init(){
document.getElementById("btn").onclick=function(){
window.resolveLocalFileSystemURL(cordova.file.applicationDirectory + 'www/pdf/lustForLife.pdf', function(fileEntry) {
console.log(fileEntry);
window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function(dirEntry) {
console.log(dirEntry);
fileEntry.copyTo(dirEntry, 'lustForLife.pdf', function(newFileEntry) {
console.log(newFileEntry);
console.log(cordova.plugins.fileOpener2);
cordova.plugins.fileOpener2.open(newFileEntry.nativeURL,'application/pdf',
{
error : function(e) {
console.log(e);
},
success : function () {
console.log('file opened successfully');
}
}
);
});
});
});
}
}
</script>
报错解决 exposed beyond app through Intent.getData()
file:///storage/emulated/0/Android/data/io.cordova.hellocordova/files/lustForLife.pdf exposed beyond app through Intent.getData()很不幸,如果你安装的Sdk是24及以上版本,因为不支持file schema,会报错。那么我们就修改target就好啦。
如何修改targetSdkVersion?
android studio方案
step1:用android studio选择要安装的api level,我选择的是22。如果还未安装,选择好后点击OK就能自动帮你下载了。
step2:打开cordova的安卓项目,位于[root]/platform/android。修改build.gradle
step3:打开安卓项目的AndroidManifest.xml。修改android:targetSdkVersion=22。
step4:打包>>build>>build APK(s)
成功!
效果如图:
github地址:https://github.com/MengChen2015/cnblogs-code
cordova程序加载pdf文件的2种方法(ios/android)的更多相关文章
- Java加载资源文件的两种方法
处理配置文件对于Java程序员来说再常见不过了,不管是Servlet,Spring,抑或是Structs,都需要与配置文件打交道.Java将配置文件当作一种资源(resource)来处理,并且提供了两 ...
- 加载properties文件的三种方法
源代码: package a.one; import java.io.FileInputStream; import java.io.InputStream; import java.util.Pro ...
- xml文件 加载properties文件的两种方法与注意事项
1.遇到的问题: 配置redisSpringContext.xml 时,遇到 properties加载失败,提示BeanDefinitionStoreException 和 java.lang. ...
- VC6.0加载lib文件的三种方法
MFC编写程序,都要用到动态链接库,MFC相关的动态库有MFCD42和MFC42等,MFC框架程序已经自动加载,那么如何引入第三方的动态链接库到工程中呢? 静态链接库是要先把程序中所需要使用的函数编译 ...
- 动态加载script文件的两种方法
第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码.第二种是,动态创建一个script标签,设置其src属性,通过把script标签插入到页 ...
- JAVA 中加载属性文件的4种方法
小总结 : 这个集合属性可以反序列化, 把持久化数据读出来, 输入流中放入要操作的文件! p.load加载这个输入流! p.getProperty( key) 根据这个键获得值! 补充 : web工程 ...
- Android 如何本地加载pdf文件
大部分app打开pdf文件是通过intent调起手机中能打开pdf文件的工具,来查看pdf文件,如果需求是,用户在app内下载好pdf文件后,不通过第三方的工具,本地打开. 这样的需求要怎么实现呢?上 ...
- Spring加载properties文件的两种方式
在项目中如果有些参数经常需要修改,或者后期可能需要修改,那我们最好把这些参数放到properties文件中,源代码中读取properties里面的配置,这样后期只需要改动properties文件即可, ...
- 加载xib文件的两种方式
一.加载xib文件的两种方式 1.方法一(NewsCell是xib文件的名称) NSArray *objects = [[NSBundle mainBundle] loadNibNamed:@&quo ...
随机推荐
- EF按时间范围条件查询
查询今日数据 db.Table.Where(d => System.Data.Entity.DbFunctions.DiffDays(d.Time, DateTime.Now) == )
- C# 依赖注入 & MEF
之前面试有问道依赖注入,因为一直是做客户端的发开发,没有接触这个,后边工作接触到了MEF,顺便熟悉一下依赖注入 详细的概念解释就不讲了,网上一大把,个人觉着依赖注入本质是为了解耦,方便扩展 依赖注入的 ...
- winform 版本号比较
Version now_v = new Version(strval); Version load_v = new Version(model.version.ToString()); if (now ...
- 使用html2canvas截图并用jspdf打印的问题
之前的方案确实可以打印出a4的大小的pdf,但是也呈现了诸多问题,因为这种方法是截图然后再进行打印的,所以打印出来的效果是模糊的,思前想后决定放弃了这种方式. 最终还是决定使用浏览器自带的打印方法. ...
- bzoj3435 [Wc2014]紫荆花之恋(动态点分治+替罪羊树)
传送门(权限) 传送门(非权限) 题解 我终终终终终终于做出来啦!!! 作为一个没有学过替罪羊树的蒟蒻现场学了一下替罪羊树,作为一个平衡树都写数组版本的看着大佬的指针题解无语只能硬去理解然后照着抄了一 ...
- 阿里云服务器之hexo环境搭建
上一步主要主要讲解云服务器购买和连接云服务器,以及文件的操作.本文主要讲解利用hexo搭建自己的静态博客,在服务器中建立自己的hexo博客环境,最后达到可以远程访问,以及远程git推送到github. ...
- 2016级算法期末上机-F.中等·AlvinZH's Fight with DDLs II
1118 AlvinZH's Fight with DDLs II 思路 中等题,贪心. 理解题意,每次攻击中,可以使某个敌人生命值-1,自己生命值减去∑存活敌人总攻击力. 贪心思想,血量少攻击高的要 ...
- [原创]php任务调度器 hellogerard/jobby
目录 简介 安装 标准使用 选项 项目实践 简介 一个强大的php层面上的定时任务调度器, 无需修改系统层面的crontab 实际中, php 结合 crontab 来实现定时任务是一种经得住考验的实 ...
- v-bind、v-on 的缩写
Vue中的缩写:v-bind.v-on v-bind 缩写:: 预期:any (with argument) | Object (without argument) 参数:attrOrProp (op ...
- [性能测试]:关于消费类ISO8583协议脚本的开发
一,要发送的报文,转化成16进制的,报文如下 "\x01\x52"//报文长度338 "\x60\x00\x24\x00\x00"//TPDU "\x ...