一个Ext JS 6可用的下载类

版权声明：本文为博主原创文章，未经博主允许不得转载。 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标签的单击事件来实现文件下载操作了。