ionic实现下载文件并打开功能(file-transfer和file-opener2插件)
作为一款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插件)的更多相关文章
- nginx 访问localhost老是下载文件不能打开网页什么情况?
nginx打开网页直接下载文件的问题 nginx sites-available文件里的default已经修改过root 路径了. 但是访问localhost的时候总是直接下载网页而不是打开网址 很奇 ...
- asp.net将页面内容按需导入Excel,并设置excel样式,下载文件(解决打开格式与扩展名指定的格式不统一的问题)
//请求一个excel类 Microsoft.Office.Interop.Excel.ApplicationClass excel = null; //创建 Workbook对象 Microsoft ...
- Winform中上传、下载文件选择打开文件的位置
打开将要上传的文件 var fileName="";OpenFileDialog fileDialog = new OpenFileDialog(); fileDialog.Mul ...
- ubuntu 安装新版的qq,可支持下载文件等常用功能
说明:此版本的QQ基本完美,但是有个缺点就是历史记录有些会显示乱码! 注意:此方法能完美解决这篇文章http://www.cnblogs.com/EasonJim/p/7118693.html的所有问 ...
- 有关PHP中点击下载文件的小功能
最近需要在项目里加一个可以点击导出树状目录的目录结构图, 我在网上查了之后,发现基本千篇一律, 都是使用下面这种header函数, 直接去readfile() 这个文件 header('Content ...
- WPF多线程下载文件,有进度条
//打开对话框选择文件 private void OpenDialogBox_Click(object sender, RoutedEventArgs e) { ...
- SFTP远程连接服务器上传下载文件-qt4.8.0-vs2010编译器-项目实例
本项目仅测试远程连接服务器,支持上传,下载文件,更多功能开发请看API自行开发. 环境:win7系统,Qt4.8.0版本,vs2010编译器 qt4.8.0-vs2010编译器项目实例下载地址:CSD ...
- SFTP远程连接服务器上传下载文件-vs2010项目实例
本项目仅测试远程连接服务器,支持上传,下载文件,更多功能开发请看API自行开发. 环境:win7系统,vs2010 vs2010项目实例下载地址:CSDN下载 如果没有CSDN积分,百度网盘下载(密码 ...
- SFTP远程连接服务器上传下载文件-vs2013项目实例
本项目仅测试远程连接服务器,支持上传,下载文件,更多功能开发请看API自行开发. 环境:win7系统,vs2013 vs2013项目实例下载地址:CSDN下载 如果没有CSDN积分,百度网盘下载(密码 ...
随机推荐
- 如何在VUE中使用leaflet地图框架
前言:在leaflet的官方文档只有静态的HTML演示并没有结合VUE的demo 虽然也有一些封装好的leaflet库例如Vue-Leaflet,但是总感觉用起来不是那么顺手,有些业务操作还是得用l ...
- C# WPF Border控件总结
Border控件不是一个布局面板,而是一个非常便于使用的元素,经常与布局面板一起使用.所以,在继续介绍其他布局面板之前,现在先介绍一下Border控件是有意义的. Border类非常简单.它只能包含一 ...
- Python globals()和locals()比较
Python的两个内置函数,globals()和locals() ,它们提供了基于字典的访问局部和全局变量的方式. globals()是可写的,即,可修改该字典中的键值,可新增和删除键值对. 而loc ...
- C++调用windowsAPI实现目录zip压缩
TCHAR zipname[] = "C:\\bcel"; TCHAR zipfile [FILENAME_MAX]; sprintf(zipfile, "%s.zip& ...
- PTA(Basic Level)1015.德才论
宋代史学家司马光在<资治通鉴>中有一段著名的"德才论":"是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子,才胜德谓之小人.凡取人之术,苟不得圣人,君子 ...
- 在Docker中部署ASP.NET Core 2.2
⒈新建一个ASP.NET Core2.2 Web程序 因为Windows的Docker和Linux的Docker有所不同,本次测试采用的是Linux的Docker,因此没有勾选启用Docker支持. ...
- 福建工程学院第十四届ACM校赛M题题解 fwt进阶,手推三进制fwt
第九集,结束亦是开始 题意: 大致意思就是给你n个3进制的数字,让你计算有多少对数字的哈夫曼距离等于i(0<=i<=2^m) 思路: 这个是一个防ak题,做法是要手推公式的fwt 大概就这 ...
- Sentinel基本使用--基于QPS流量控制(二), 采用Warm Up预热/冷启动方式控制突增流量
Sentinel基本使用--基于QPS流量控制(二), 采用Warm Up预热/冷启动方式控制突增流量 2019年02月18日 23:52:37 xiongxianze 阅读数 398更多 分类专栏: ...
- leecode刷题(23)-- 合并两个有序链表
leecode刷题(23)-- 合并两个有序链表 合并两个有序链表 将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2-> ...
- EJS学习(三)之语法规则中
⚠️实例均结合node,也就是AMD规范版本 ejs中使用render()表示渲染文本 接收三个参数:模版字符串.data.options,返回一个字符串 const ejs = require('e ...