Cordova+Vue 混合開發實現下載並預覽

Storm4542發表於2019-02-01
Vue

1.前言

近期混合應用開發需要下載和預覽的功能，選擇方案為先下載到本地，再使用cordova-plugin-file-opener2外掛進行預覽。

採用此預覽方案檔案會被先下載到本地，cordova-plugin-file-opener2外掛其實可以直接開啟網路地址來實現預覽，採用此方式是基於以下考慮：

  1. 避免重複下載

  2. 避免有檔案格式解析錯誤的情況，使用者可以到本地再次進行檢視

  3. 下載目錄可控

2.框架

專案採用 Cordova + Vue + MintUI

3.操作

  • 下載
    • fileInfo提供下載地址、檔名稱、檔案格式（或副檔名）
function downLoad(fileInfo) {
    Vue.$toast('正在下載，請稍等');
    new FileTransfer().download(
        encodeURI(FILES_HOST + "/" + fileInfo.fileid), //uri網路下載路徑
        cordova.file.dataDirectory + fileInfo.fileid, //檔案本地儲存路徑
        function (fileEntry) {
            preView(fileEntry, fileInfo);
        },
        function (error) {
            Vue.$toast('下載失敗');
            console.log(error);
        },
        false,
        {
            headers: {'Authorization': `Bearer ${localStorage.getItem('CFA0')}`},
        }
    );
}
複製程式碼

  • 下載完成，預覽檔案

    • 使用 cordova-plugin-file-opener2 開啟檔案

    • mineType使用 mime-types獲取，提供副檔名即可獲取（若後端提供格式則不需要）。

function preView(fileEntry, fileInfo) {
    Vue.$toast('開始預覽');
    let url;
    let platform = device.platform.toLowerCase();
    if (platform === 'android') {
        url = fileEntry.toInternalURL() //安卓預覽路徑
    } else {
        url = fileEntry.toURL() //ios 預覽路徑
    }
    console.log('路徑', url);
    cordova.plugins.fileOpener2.showOpenWithDialog(
        url,
        mime.lookup(fileInfo.fileType),
        {
            error: function (e) {
                Vue.$toast('預覽失敗');
            },
            success: function () {
                Vue.$toast('預覽成功');
            }
        },
    );
}
複製程式碼

4. 可能遇到的坑

在預覽檔案的時候 cordova-plugin-file-opener2有可能會報以下錯誤：

Attempt to invoke virtual method 'android.content.res.XmlResourceParser android.content.pm.ProviderInfo.loadXmlMetaData(android.content.pm.PackageManager, java.lang.String)' on a null object reference

尋找很久，應該是因為許可權問題導致，解決辦法如下:

在 AndroidManifest.xml中application標籤內增加

<provider 
          android:name="io.github.pwlin.cordova.plugins.fileopener2.FileProvider" 				  android:authorities="${applicationId}.opener.provider" 
          android:exported="false" android:grantUriPermissions="true">
<meta-data 
           android:name="android.support.FILE_PROVIDER_PATHS"
           android:resource="@xml/opener_paths" />
</provider>
複製程式碼

相關文章