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就能自动帮你下载了。