作为一款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. 4-2 编辑器之神--vim

    vim vi:Visual editor文本编辑器 文本:ascii,Unicode vim:VIsual editor iMproved 官网:www.vim.org 帮助网站:Vimhelp.or ...

  2. 3-2 LInux文件管理

    LInux文件管理 文件系统目录结构 Linux中目录结构是有一定的约定的FHS /bin:存放二进制程序 /boot:启动相关 /dev:设备文件 /etc:配置文件 /home:用户家目录 /li ...

  3. 2-0 虚拟机与Linux系统安装

    虚拟机与Linux系统安装 虚拟机硬件选择 由于是初学Linux,所以我们通过在虚拟机里安装的方式学习Linux,如果不知道找虚拟机和Linux的话请看我上一篇博客:计算机基础 如果你已经准备好了虚拟 ...

  4. caoz的梦呓:信息安全,别为了芝麻丢了西瓜

    猫宁!!! 参考链接:https://mp.weixin.qq.com/s/z6UI-tdhN1CGdqQQuglLVQ 对方公众号:caoz的梦呓 我之前写微博的时候,经常就有读者反馈说,你怎么用3 ...

  5. 进程,多进程,进程与程序的区别,程序运行的三种状态,multiprocessing模块中的Process功能,和join函数,和其他属性,僵尸与孤儿进程

    1.进程 什么是进程: 一个正在被运行的程序就称之为进程,是程序具体执行的过程,是一种抽象概念,进程来自操作系统 2.多进程  多个正在运行的程序 在python中实现多线程的方法 from mult ...

  6. Linux文件权限码

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

  7. OpenStack组件——Nova计算资源管理

    1.nova介绍 Nova 是 OpenStack 最核心的服务,负责维护和管理云环境的计算资源.OpenStack 作为 IaaS 的云操作系统,虚拟机生命周期管理也就是通过 Nova 来实现的. ...

  8. 自然语言处理NLP学习笔记三:使用Django做一个NLP的Web站点

    前言: 前面我们已经能初步实现一个中文自然处理语言的模型了,但交互界面是命令行的,不太友好. 如果想做一个类似http://xiaosi.trs.cn/demo/rs/demo的界面,那就还需要继续往 ...

  9. 【VS开发】【电子电路技术】VPX技术介绍

    VPX技术介绍 杨跃江 2009-12-18 杨跃江 13902479857 中科祥云(深圳)信息产业有限公司 1VPX 技术 新型VPX(VITA 46)标准是自从VME引入后的25年来,对于VME ...

  10. SpringBoot上传文件

    1.pom文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...