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

ionic实现下载文件并打开功能(file-transfer和file-opener2插件)的更多相关文章

  1. nginx 访问localhost老是下载文件不能打开网页什么情况?

    nginx打开网页直接下载文件的问题 nginx sites-available文件里的default已经修改过root 路径了. 但是访问localhost的时候总是直接下载网页而不是打开网址 很奇 ...

  2. asp.net将页面内容按需导入Excel,并设置excel样式,下载文件(解决打开格式与扩展名指定的格式不统一的问题)

    //请求一个excel类 Microsoft.Office.Interop.Excel.ApplicationClass excel = null; //创建 Workbook对象 Microsoft ...

  3. Winform中上传、下载文件选择打开文件的位置

    打开将要上传的文件 var fileName="";OpenFileDialog fileDialog = new OpenFileDialog(); fileDialog.Mul ...

  4. ubuntu 安装新版的qq,可支持下载文件等常用功能

    说明:此版本的QQ基本完美,但是有个缺点就是历史记录有些会显示乱码! 注意:此方法能完美解决这篇文章http://www.cnblogs.com/EasonJim/p/7118693.html的所有问 ...

  5. 有关PHP中点击下载文件的小功能

    最近需要在项目里加一个可以点击导出树状目录的目录结构图, 我在网上查了之后,发现基本千篇一律, 都是使用下面这种header函数, 直接去readfile() 这个文件 header('Content ...

  6. WPF多线程下载文件,有进度条

    //打开对话框选择文件         private void OpenDialogBox_Click(object sender, RoutedEventArgs e)         {     ...

  7. SFTP远程连接服务器上传下载文件-qt4.8.0-vs2010编译器-项目实例

    本项目仅测试远程连接服务器,支持上传,下载文件,更多功能开发请看API自行开发. 环境:win7系统,Qt4.8.0版本,vs2010编译器 qt4.8.0-vs2010编译器项目实例下载地址:CSD ...

  8. SFTP远程连接服务器上传下载文件-vs2010项目实例

    本项目仅测试远程连接服务器,支持上传,下载文件,更多功能开发请看API自行开发. 环境:win7系统,vs2010 vs2010项目实例下载地址:CSDN下载 如果没有CSDN积分,百度网盘下载(密码 ...

  9. SFTP远程连接服务器上传下载文件-vs2013项目实例

    本项目仅测试远程连接服务器,支持上传,下载文件,更多功能开发请看API自行开发. 环境:win7系统,vs2013 vs2013项目实例下载地址:CSDN下载 如果没有CSDN积分,百度网盘下载(密码 ...

随机推荐

  1. Linux文件权限码

    权限 二进制值 八进制值 描述 --- 000 0 没有任何权限 --x 001 1 只有执行权限 -w- 010 2 只有写入权限 -wx 011 3 有写入和执行权限 r-- 100 4 只有读取 ...

  2. 二 MyBatis 从入门到进阶 2 Maven 入门

    1 Maven 的使用 1.1 本地仓库与中央仓库 本地仓库:Window \ Preferences \ Maven \ User Settings \ Local Repository 中央仓库: ...

  3. 人工智能06 能计划的agent

    能计划的agent 存储与计算 响应agent的动作功能几乎没有做任何计算.从本质上讲,这些agent执行的动作或者由他们的设计者.或者通过学习.或者通过演化过程.或者由以上几方面的组合来选择给他们的 ...

  4. 【Linux开发】linux设备驱动归纳总结(三):4.ioctl的实现

    linux设备驱动归纳总结(三):4.ioctl的实现 一.ioctl的简介: 虽然在文件操作结构体"struct file_operations"中有很多对应的设备操作函数,但是 ...

  5. C++学习笔记-继承

    类之间可以建立联系,这就使得类可以有某种关系 类之间的关系 has-A:包含关系,一个类使用另一个已经定义好的类的数据 uses-A:使用关系,友元或者对象参数传递 is-A:是的关系,这就是继承,具 ...

  6. flask_migrate 的应用

    怎么查看的命令: python manage.py --help 使用flask_migrate的注意事项:

  7. Pandas时间序列和分组聚合

    #时间序列import pandas as pd import numpy as np # 生成一段时间范围 ''' 该函数主要用于生成一个固定频率的时间索引,在调用构造方法时,必须指定start.e ...

  8. [转帖]MySQL5.7.20编译安装

    MySQL5.7.20编译安装 尝试一下 想着 我在arm上面最终安装失败了. https://www.cnblogs.com/shengdimaya/p/8027507.html 1:官网下载sou ...

  9. Java 错误:Constructor call must be the first statement in a constructor

    今天用学校里的黑马程序员通Java语法 想到了:在有参构造函数中调用无参构造函数 语法是这样的: class Person{ private int age; public Person() { Sy ...

  10. 微信小程序使用页面栈改变上一页面的数据

    微信小程序中如果从一个页面中进入下一个页面,如果下个页面的数据有删除或者增加再返回上一个页面的时候,就会导致页面不刷新(数据加载函数在onload中),从而造成数据不一致的情况.其实在微信小程序中是可 ...