您现在的位置是:网站首页> 内容页

cordova程序加载pdf文件的2种方法(ios/android)

  • 宝运莱游戏官网
  • 2019-03-25
  • 190人已阅读
简介前言   公司目前的前端架构是微信端由vue全家桶负责h5网站的单页应用,android端和ios端则选择cordova打包成apk和app。其中,有一个业务逻辑是点击某个链接进入

前言

     公司目前的前端架构是微信端由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-filecordova 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

 

 

         

 

 

    

     

    

文章评论

Top