怎么在HTML5中Blob利用實現一個文件下載功能

怎么在HTML5中Blob利用實現一個文件下載功能？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

$("#exportAll").on("click",function(){     //點擊【全部導出】
    //layer.load();
    var province = $('#operatingData select[name=\'province\'] option:selected').val();  //查詢條件（省）
    var city = $('#operatingData select[name=\'city\'] option:selected').val();    //查詢條件（市）

    var url = '/xxx/excelAllDownload';      //【全部導出】請求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 () {   //定義請求完成的處理函數
        //layer.closeAll('loading');
        if (this.status === 200) {
            var blob = this.response;
            var reader = new FileReader();
            reader.readAsDataURL(blob);   // 轉換為base64，可以直接放入a標簽href
            reader.onload = function (e) {
                var a = document.createElement('a');   // 轉換完成，創建一個a標簽用于下載
                a.download = 'XX數據.xlsx';
                a.href = e.target.result;
                $("body").append(a);    // 修復firefox中無法觸發click
                a.click();
                $(a).remove();
            }
        }else if(this.status === 504){
            alert('導出失敗，請求超時');
            //layer.msg('導出失敗，請求超時', {icon: 2});
        }else{
            alert('導出失敗');
            //layer.msg('導出失敗', {icon: 2});
        }
    };
    xhr.send("province=" + province + "&city=" + city);
})

上面是在服務器動態生成excel文件時使用的下載方式，因為對應的 URL 并不存在，我們就不能簡單的指定 href 屬性。

但是不同瀏覽器對 Blob （類文件對象）有不同的大小限制，這種借助Blob轉換成二進制 實現下載功能的方式并不能導出數據量過多的數據到excel文件（即不能下載太大的文件），且有兼容性問題。

所以，我們可以通過 JavaScript 對服務器發出一個請求，通知它去生成某個文件，然后把對應的 URL 返回給客戶端。代碼如下：（此時的請求結果為一個已經存在于服務器上面的靜態文件的路徑）

$("#exportAll").on("click",function(){     //點擊【全部導出】
    var url = '/xxx/excelAllDownload';     //【全部導出】請求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 () {   //定義請求完成的處理函數
        if (this.status === 200) {
            //方式一實現靜態文件下載，不能自定義下載文件名字
            //location.href = "json/abc.xlsx";  //this.response（返回的服務器上的靜態文件路徑）

            //方式二實現靜態文件下載，可以自定義下載文件名字
            var a = document.createElement('a');  //創建a標簽用于下載
            a.download = 'XXX數據.xlsx';
            a.href = "json/abc.xlsx";  //this.response（返回的服務器上的靜態文件路徑）
            $("body").append(a);       // 修復firefox中無法觸發click
            a.click();
            $(a).remove();
        }else if(this.status === 504){
            alert('導出失敗，請求超時');
        }else{
            alert('導出失敗');
        }
    };
    xhr.send();
})

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。