一个Ext JS 6可用的下载类
栏目: JavaScript · 发布时间: 6年前
内容简介:版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/tianxiaode/article/details/83081460
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/tianxiaode/article/details/83081460
HTML5为A标签添加了download属性,可用来指定链接的文件名,单击A标签后就可实现文件下载功能,该组件就是利用这个特性来实现的,具体代码如下:
Ext.define('Admin.util.Download', { alternateClassName: 'DL', singleton: true, saveAs: function(url,filename, fileType, params){ Ext.Ajax.request({ method: 'GET', url: url, params: params, filename: filename, binary: true, success: function(response, options){ Ext.Msg.hide(); let filename= options.filename, bytes = response.responseBytes, blob = new Blob([bytes], {type:fileType}); a = document.createElement("a"), evt = document.createEvent("MouseEvents"); a.innerHTML = filename; a.download = filename; a.href = URL.createObjectURL(blob); evt.initEvent("click", false, false); a.dispatchEvent(evt); }, failure: FAILED.ajax }) } });
下载类 Admin.util.Download
为单例模式的列,也就是不需要实例化就可直接调用 saveSa
方法,如果不喜欢使用单例模式,也可将 saveAs
方法修改为静态方法。
调用 saveAs
方法需要传递文件名(filename)、文件类型(fileType)和提交参数(params)这三个参数。
在 saveAs
方法内,会调用Ajax去获取下载文件。要注意的是,在调用Ajax时,将数据返回格式设置为了二进制格式( binary: true
)。在成功获取文件后,就可使用响应的 responseBytes
属性来获取返回的字节流,然后将字节流转换为 blob
对象,这里要注意是必须设置好文件类型,不然下载后的文件可能是非预期的。在创建blob对象后,就可创建一个A标签了。在创建A标签时,需要绑定它的鼠标事件和 innerHtml
等属性,而最关键就是将下载的文件名绑定到 download
属性,并为 blob
对象创建一个访问地址赋值给A标签的 href
属性。最后就是调用A标签的单击事件来实现文件下载操作了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Android原生下载(下篇)多文件下载+多线程下载
- 构建生产环境可用的高可用kubernetes集群
- 维基百科 – Sparql查询获取dbpedia可用的所有可用电影
- 可用性高达5个9!支付系统高可用架构设计实战
- 浪潮InCloud OpenStack:度量可用性“三维”,实现高可用云环境
- 小说下载器 ebookdownloader v1.7.5 发布:添加新下载源
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。