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