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

fengxiuping 发布于2019-08-01 18:34 / 1529人阅读

摘要：作为一款，下载文件功能，和打开文件功能，在某些场景下还是十分有必要的。使用和这两个插件能够在比较容易的实现这个功能。

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

GPU服务器私有云读取服务器文件并下载 html实现下载功能如何连接阿里云服务器并下载文件 html下载文件插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51825.html

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

摘要：作为一款，下载文件功能，和打开文件功能，在某些场景下还是十分有必要的。使用和这两个插件能够在比较容易的实现这个功能。作为一款app，下载文件功能，和打开文件功能，在某些场景下还是十分有必要的。使用cordova-plugin-file-transfer和cordova-plugin-file-opener2这两个插件能够在ionic比较容易的实现这个功能。 1、安装： cordova...

cfanr 2019-08-26 11:43 评论0 收藏0
Capacitor 新一代混合应用“神器” 会代替Cordova吗？？

摘要：介绍畅想是由团队最新开发维护的一个跨平台的应用程序容器，可以轻松构建在，，和上本机运行的应用程序。后者旨在替代或者说是进化。希望看到在未来发展，以及正式发布。我认为它有可能大大改善混合应用开发体验。 1.介绍or畅想 Capacitor是由ionic团队最新开发维护的一个跨平台的应用程序容器，可以轻松构建在iOS，Android，Electron和Web上本机运行的Web应用程序。我们...

番茄西红柿 2019-04-23 13:14 评论0 收藏0
一个基于Angular+Ionic+Phonegap的混合APP实战

摘要：有二维码扫描功能，还做了类似消息可拖拽效果，上拉下拉刷新，轮播图组件。特别适合用于基于模式的移动应用程序开发。简介是一个用基于，和的，创建移动跨平台移动应用程序的快速开发平台。这个项目做得比较早，当时是基于ionic1和angular1做的。做了四个tabs的app，首页模仿携程首页，第二页主要是phonegap调用手机核心功能，第三页模仿微信和qq聊天页，第四页模仿一般手机的表单设...

孙淑建 2019-08-26 11:46 评论0 收藏0
Ionic2入坑基础教程和安装指南

摘要：安装程序主要通过命令行工具来创建和开发，并使用来构建和部署为原生应用程序。基础教程确保完成之前的安装并测试启动成功。安装Ionic Ionic 2 程序主要通过Ionic命令行工具CLI来创建和开发，并使用Cordova来构建和部署为原生应用程序。也就是说我们需要先安装一些工具来实现程序开发。安装Ionic CLI 和 Cordova 要创建 Ionic 2 项目，你需要安装最新版...

jayce 2019-08-21 14:35 评论0 收藏0
ionic1使用ImagePicker插件并且显示中文（汉化）

摘要：在使用开发时，打开相册应该是使用比较频繁的插件之一。解决办法可以看我另一篇文章使用在安卓手机上闪退问题参考文献之图片选择插件使用插件中文显示在使用ionic开发时，打开相册应该是使用比较频繁的插件之一。下面讲讲我在项目中使用（这部分官方比较详细，就简单描述）以及解决插件显示英文问题 1、imagepicker安装cordova plugin add cordova-plugin-im...

Vultr 2019-08-26 11:41 评论0 收藏0