ionic实现下载文件并打开功能（file-transfer和file-opener2插件）

2024年4月13日 232次阅读 来源: 嘉恩Gavin

作为一款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

    原文作者：嘉恩Gavin
    原文地址: https://segmentfault.com/a/1190000013271346
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞