下載Excel等大文件時,我們通過ajax請求到二進制的data數據,再利用Blob對象包裝,即可實現下載大文件。
Blob對象
一個 Blob對象表示一個不可變的, 原始數據的類似文件對象。
var blob = new Blob(data[, options]))
返回一個新創建的 Blob 對象,其內容由參數中給定的數組串聯組成。
接受兩個參數:
- data:是一組數據,必須是數組,即使只有一個字符串也必須用數組裝起來.
- options:是對這一Blob對象的配置屬性,目前也只有一個type也就是相關的MIME需要設置 type的值: ‘text/csv,charset=UTF-8’ 設置為csv格式,并設置編碼為UTF-8,’text/html’ 設置成html格式。
請求二進制數據
- 請求數據類型: responseType: 'arraybuffer' // 二進制流
- 請求返回的數據:res
URL.createObjectURL()
URL.createObjectURL() 靜態方法會創建一個 DOMString,其中包含一個表示參數中給出的對象的URL。這個 URL 的生命周期和創建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。
每次調用 createObjectURL() 方法時,都會創建一個新的 URL 對象,當不再需要這些 URL 對象時,每個對象必須通過調用 URL.revokeObjectURL() 方法傳入創建的URL為參數,用來釋放它。瀏覽器會在文檔退出的時候自動釋放它們,但是為了獲得最佳性能和內存使用狀況,應該在安全的時機主動釋放掉它們。
下載excel 表格 :
res => {
const blob = new Blob([res], {
type: 'application/ynd.ms-excel;charset=UTF-8' // excel表格類型
}); // 創建Blob實例
const downloadElement = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 創建 URL 對象
downloadElement.href = href;
downloadElement.download = 'xxx.xls';
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement); // 下載完成移除元素
window.URL.revokeObjectURL(href); // 釋放掉blob對象
}