ionic實現下載檔案並開啟功能（file-transfer和file-opener2外掛）

嘉恩Gavin發表於2019-02-16

作為一款app，下載檔案功能，和開啟檔案功能，在某些場景下還是十分有必要的。使用cordova-plugin-file-transfer和cordova-plugin-file-opener2這兩個外掛能夠在ionic比較容易的實現這個功能。

1、安裝：

cordova plugin add cordova-plugin-file-transfer
cordova plugin add cordova-plugin-file-opener2

2、程式碼實現

angular.module("app").controller("accessoryDetailCtrl", ["$scope","$ionicLoading", 
  function ($scope $ionicLoading) {
    "use strict";
    
    $scope.downLoadFile = (downloadUrl) => {
      let fileTransfer = new FileTransfer(),
        uri = encodeURI(downloadUrl), // 檔案的地址連結
        fileUrl = cordova.file.dataDirectory + uri.substr(uri.lastIndexOf("/") + 1); // 檔案的下載地址
      fileTransfer.download(uri, fileUrl, entry => {
        entry.file(data => {
          cordova.plugins.fileOpener2.showOpenWithDialog(fileURL, data.type); // showOpenWithDialog使用手機上安裝的程式開啟下載的檔案
        });
        console.log("download accessory successful. accessory information : " + JSON.stringify(entry));
      }, error => {
        console.error("download accessory fail. Because of : " + JSON.stringify(error));
      });

      fileTransfer.onprogress = function(progressEvent) { // 載入過程中的loading提示
        const percentFinished = 99;
        let downloadProgress = Math.round((progressEvent.loaded / progressEvent.total) * $scope.percentage);
        $ionicLoading.show({
          template: "正在下載" + downloadProgress + "%"
        });
        downloadProgress > percentFinished && $ionicLoading.hide();
      };
    };
    
  }]);

3、注意事項
file-transfer除了支援下載還有上傳檔案的功能，下載的時候要注意的是下載的地址，ios和android可以路徑是不同的，可以找出相同的路徑，或者分別處理，這裡使用的是cordova.file.dataDirectory，ios和android下載同一個路徑

在使用file-opener2時，需要傳入mineType，這個我們可以在file-transfer時獲取。
file-opener2除了我們使用的showOpenWithDialog方法，還有open方法呼叫手機自帶的開啟功能，可以用來實現android的版本更新，下載新版本安裝（以後有時間在寫，網上的相關文件也很多）
另外還有uninstall和appIsInstalled功能，專案中沒有使用，就不在研究了。

最後，在android7，android8上使用file-transfer外掛有需要特殊的處理，詳細可以檢視一下github
cordova-plugin-file-transfer

相關文章