今天和大家分享有關(guān)于“HTML5 中Blob 文件下載功能怎么實現(xiàn)?”這方面的問題,原理其實很簡單,就是將文本或者JS字符串信息(即后臺返回來的在服務(wù)器上沒有具體路徑的動態(tài)文件,如導(dǎo)出數(shù)據(jù)功能)借助Blob轉(zhuǎn)換成二進制,然后,作為 a 標(biāo)簽的 href 屬性,配合download屬性,實現(xiàn)下載功能,但是缺點是如果文件太大會下載失敗。
下面是導(dǎo)出數(shù)據(jù)的一個實例:
$("#exportAll").on("click",function(){ //點擊【全部導(dǎo)出】
//layer.load();
var province = $('#operatingData select[name='province'] option:selected').val(); //查詢條件(?。? var city = $('#operatingData select[name='city'] option:selected').val(); //查詢條件(市)
var url = '/xxx/excelAllDownload'; //【全部導(dǎo)出】請求url
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.responseType = "blob"; //返回類型blob
xhr.onload = function () { //定義請求完成的處理函數(shù)
//layer.closeAll('loading');
if (this.status === 200) {
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob); // 轉(zhuǎn)換為base64,可以直接放入a標(biāo)簽href
reader.onload = function (e) {
var a = document.createElement('a'); // 轉(zhuǎn)換完成,創(chuàng)建一個a標(biāo)簽用于下載
a.download = 'XX數(shù)據(jù).xlsx';
a.href = e.target.result;
$("body").append(a); // 修復(fù)firefox中無法觸發(fā)click
a.click();
$(a).remove();
}
}else if(this.status === 504){
alert('導(dǎo)出失敗,請求超時');
//layer.msg('導(dǎo)出失敗,請求超時', {icon: 2});
}else{
alert('導(dǎo)出失敗');
//layer.msg('導(dǎo)出失敗', {icon: 2});
}
};
xhr.send("province=" + province + "&city=" + city);
})
上面是在服務(wù)器動態(tài)生成excel文件時使用的下載方式,因為對應(yīng)的 URL 并不存在,我們就不能簡單的指定 href 屬性。
但是不同瀏覽器對 Blob (類文件對象)有不同的大小限制,這種借助Blob轉(zhuǎn)換成二進制 實現(xiàn)下載功能的方式并不能導(dǎo)出數(shù)據(jù)量過多的數(shù)據(jù)到excel文件(即不能下載太大的文件),且有兼容性問題。
所以,我們可以通過 JavaScript 對服務(wù)器發(fā)出一個請求,通知它去生成某個文件,然后把對應(yīng)的 URL 返回給客戶端。代碼如下:(此時的請求結(jié)果為一個已經(jīng)存在于服務(wù)器上面的靜態(tài)文件的路徑):
$("#exportAll").on("click",function(){ //點擊【全部導(dǎo)出】
var url = '/xxx/excelAllDownload'; //【全部導(dǎo)出】請求url
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.responseType = "blob"; //返回類型blob
xhr.onload = function () { //定義請求完成的處理函數(shù)
if (this.status === 200) {
//方式一實現(xiàn)靜態(tài)文件下載,不能自定義下載文件名字
//location.href = "json/abc.xlsx"; //this.response(返回的服務(wù)器上的靜態(tài)文件路徑)
//方式二實現(xiàn)靜態(tài)文件下載,可以自定義下載文件名字
var a = document.createElement('a'); //創(chuàng)建a標(biāo)簽用于下載
a.download = 'XXX數(shù)據(jù).xlsx';
a.href = "json/abc.xlsx"; //this.response(返回的服務(wù)器上的靜態(tài)文件路徑)
$("body").append(a); // 修復(fù)firefox中無法觸發(fā)click
a.click();
$(a).remove();
}else if(this.status === 504){
alert('導(dǎo)出失敗,請求超時');
}else{
alert('導(dǎo)出失敗');
}
};
xhr.send();
})
那么總結(jié)了各個資料的內(nèi)容我們對于“HTML5 中Blob 文件下載功能怎么實現(xiàn)?”這個問題的大致實現(xiàn)方法都可以自己實現(xiàn)了,那么以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家可以在W3Cschool學(xué)習(xí)到更多的相關(guān)內(nèi)容。