作为一款app,下载文件功能,和打开文件功能,在某些场景下还是十分有必要的。使用cordova-plugin-file-transfercordova-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. 【学习笔记】python3中yaml文件使用

    1.yaml -> 字典:用yaml.load()或yaml.safe_load(YAML字符串或文件句柄),如yaml中有中文,可以使用.encode('utf-8')或打开文件时指定enco ...

  2. Python爬虫学习==>第十二章:使用 Selenium 模拟浏览器抓取淘宝商品美食信息

    学习目的: selenium目前版本已经到了3代目,你想加薪,就跟面试官扯这个,你赢了,工资就到位了,加上一个脚本的应用,结局你懂的 正式步骤 需求背景:抓取淘宝美食 Step1:流程分析 搜索关键字 ...

  3. 云计算共享组件--消息队列rabbitmq(3)

    一.MQ 全称为 Message Queue, 消息队列( MQ ) 是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们. 消息传 ...

  4. 应用安全 - 社工 - 大数据 - Fofa - 汇总

    搜索语法 title=”abc”   header=”abc”  body=”abc”  domain=”xx.com”  host=”.xx.cn”  port=”443”     ip=”1.1. ...

  5. NOIp2016 D2T3 愤怒的小鸟【搜索】(网上题解正解是状压)

    题目传送门 没啥别的想法,感觉就是搜索,经过原点的抛物线已知两个点就可以求出解析式,在还没有被打下来的两个猪之间随意配对,确定解析式之后标记在这个抛物线下被打下来的猪. 猪也可以单独用一个抛物线打下来 ...

  6. linux中su和sudo区别

    su切换用户,切换成root用户,要输入root用户的密码 su - 用户名 sudo  涉及到 /etc/sudoers文件 ,内容如下: # User privilege specificatio ...

  7. 利用docker搭建本地私有镜像仓库

    主机名 角色 sht-sgmhadoopcm-01 Docker Repository sht-sgmhadoopnn-01 Docker Client 1. 在两台节点分别安装docker http ...

  8. Python学习【day01】- Python初识

    Python下载:https://www.python.org/downloads/ 下载后进行安装,安装后的Python我们称之为Python解析器 1.打印“Hello World” 安装后的Py ...

  9. 依赖作用域之<scope>test</scope>

    经常在代码中看到依赖的作用域为<scope>test</scope>,它的作用是,只能在test目录(通过右键->Make Directory as->Test S ...

  10. Java第七周课堂示例总结

    一.super();调用基类构造方法 代码: class Grandparent{ public Grandparent(){ System.out.println("GrandParent ...