HTML5 Blob 實(shí)現(xiàn)文件下載功能的示例代碼
我要評(píng)論原理其實(shí)很簡(jiǎn)單，就是將文本或者JS字符串信息（即后臺(tái)返回來(lái)的在服務(wù)器上沒(méi)有具體路徑的動(dòng)態(tài)文件，如導(dǎo)出數(shù)據(jù)功能）借助Blob轉(zhuǎn)換成二進(jìn)制，然后，作為 a 標(biāo)簽的 href 屬性，配合download屬性，實(shí)現(xiàn)下載功能，缺點(diǎn)是如果文件太大會(huì)下載失敗。
下面是導(dǎo)出數(shù)據(jù)的一個(gè)實(shí)例：
$("#exportAll").on("click",function(){ //點(diǎn)擊【全部導(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)出】請(qǐng)求url
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.responseType = "blob"; //返回類(lèi)型blob
xhr.onload = function () { //定義請(qǐng)求完成的處理函數(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)建一個(gè)a標(biāo)簽用于下載
a.download = 'XX數(shù)據(jù).xlsx';
a.href = e.target.result;
$("body").append(a); // 修復(fù)firefox中無(wú)法觸發(fā)click
a.click();
$(a).remove();
}
}else if(this.status === 504){
alert('導(dǎo)出失敗，請(qǐng)求超時(shí)');
//layer.msg('導(dǎo)出失敗，請(qǐng)求超時(shí)', {icon: 2});
}else{
alert('導(dǎo)出失敗');
//layer.msg('導(dǎo)出失敗', {icon: 2});
}
};
xhr.send("province=" + province + "&city=" + city);
})
上面是在服務(wù)器動(dòng)態(tài)生成excel文件時(shí)使用的下載方式，因?yàn)閷?duì)應(yīng)的 URL 并不存在，我們就不能簡(jiǎn)單的指定 href 屬性。
但是不同瀏覽器對(duì) Blob （類(lèi)文件對(duì)象）有不同的大小限制，這種借助Blob轉(zhuǎn)換成二進(jìn)制 實(shí)現(xiàn)下載功能的方式并不能導(dǎo)出數(shù)據(jù)量過(guò)多的數(shù)據(jù)到excel文件（即不能下載太大的文件），且有兼容性問(wèn)題。
所以，我們可以通過(guò) JavaScript 對(duì)服務(wù)器發(fā)出一個(gè)請(qǐng)求，通知它去生成某個(gè)文件，然后把對(duì)應(yīng)的 URL 返回給客戶端。代碼如下：（此時(shí)的請(qǐng)求結(jié)果為一個(gè)已經(jīng)存在于服務(wù)器上面的靜態(tài)文件的路徑）
$("#exportAll").on("click",function(){ //點(diǎn)擊【全部導(dǎo)出】
var url = '/xxx/excelAllDownload'; //【全部導(dǎo)出】請(qǐng)求url
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.responseType = "blob"; //返回類(lèi)型blob
xhr.onload = function () { //定義請(qǐng)求完成的處理函數(shù)
if (this.status === 200) {
//方式一實(shí)現(xiàn)靜態(tài)文件下載，不能自定義下載文件名字
//location.href = "json/abc.xlsx"; //this.response（返回的服務(wù)器上的靜態(tài)文件路徑）
//方式二實(shí)現(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中無(wú)法觸發(fā)click
a.click();
$(a).remove();
}else if(this.status === 504){
alert('導(dǎo)出失敗，請(qǐng)求超時(shí)');
}else{
alert('導(dǎo)出失敗');
}
};
xhr.send();
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了深入解析HTML5中的Blob對(duì)象的使用,是HTML5入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-09-08