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打开网页下载php,nginx,_nginx 访问localhost老是下载文件不能打开网页什么情况?,nginx - phpStudy...
nginx 访问localhost老是下载文件不能打开网页什么情况? nginx sites-available文件里的default已经修改过root 路径了. 但是访问localhost的时候总是 ...
- 微信小程序 关于下载文件、打开文件预览文件(wx.downloadFile和wx.openDocument)
下载文件并打开文件 示例API wx.downloadFile({url: 'https://example.com/audio/123', //仅为示例,并非真实的资源success (res) { ...
- Java下载文件记事本打开不换行问题
Java下载文件记事本打开不换行问题,其他编辑器可以换行: 原因是下载的内容用的是\n,而win记事本是用的\r\n java 将\n转换为\r\n String script = editText. ...
- 直接让浏览器下载文件而不打开
2019独角兽企业重金招聘Python工程师标准>>> 直接让客户端浏览器下载已知类型(*.doc)的文件 ,而不使用关联程序打开. Web开发人员都有过这样的疑问 ...
- 微信小程序-下载文件并打开/下载视频播放视频/下载音频文件-Android和IOS调试终版
下载文件并预览: 调接口下载文件,接口返回的是.bin类型的临时文件,直接调用uniapp原生接口openDocument可能出现打不开的情况或者可能打开文件乱码异常,所以我们需要获取一下文件类型fi ...
- uniapp下载文件并打开
/*** 下载文件测试*/downLoadFile() {var _this = thisuni.downloadFile({url: 'http://web.gdut.edu.cn/~jsxy/do ...
- JS a标签下载文件而不打开文件
// 下载文件 function downfile(obj) {var url = $(obj).attr("files");//url = "http://10.19. ...
- android自动打开apk文件失败,【Android】DownloadManager 打开url下载的APK文件无法打开的问题 cannot open file...
问题如标题 想用浏览器下载,或者下载器下载 应用场景有以下几种: 1.监控DownloadManager,文件下载完成时以文件路径的形式发送intent: // install work Intent ...
- php云盘实现上传下载,文件上传功能-PHP通过数据库实现在线网盘管理文件上传下载-PHP中文网教程...
1,上传文件前端代码: 在netdisk_html.php文件里加上以下代码<?php 2,由前端代码可知通过post方式提交的文件上传请求,别忘了加enctype="multipar ...
最新文章
- vue项目刷新当前页面的三种方法
- linux命令查看几位,Linux每周几个命令(一)--查找篇
- js 和 query 获取页面和滚动条的高度
- $Django importlib与dir知识,手写配置文件, 配置查找顺序 drf分页器drf版本控制
- Win11 恢复 Win10经典右键菜单 亲测有效
- php复习,PHP排序算法的复习和总结
- (79)FPGA版本如何管理?
- 查看现有Exchange 2010数据库大小
- 程序设计导引及在线实践之大整数乘法
- 入门PCB设计AD9学习笔记10-11 PCB板的3D建模
- 浅谈WPF中的Calendar日历控件
- 2021华为秋招算法工程师面试经历(实习过)
- 司空见惯 - 英雄扫雷鼠
- 加油站都需要什么手续_开一个加油站需要什么手续,需要多少启动资金?
- win11触控板用不了怎么办?win11触控板用不了的解决方法
- 时间管理 四象限 todoList
- 基于stm32的模拟楼道光控开关的实验
- “金猿奖”掀狂欢上方传媒董事长张秋水助阵
- Matlab通过ode求解微分方程
- JVM架构和垃圾回收机制深入理解