怎么在HTML5中Blob利用實(shí)現(xiàn)一個(gè)文件下載功能？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出嶺東免費(fèi)做網(wǎng)站回饋大家。

$("#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";   //返回類型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 （類文件對(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";   //返回類型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();
})

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。