一個Ext JS 6可用的下載類

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標籤的單擊事件來實現檔案下載操作了。