下載
封裝調(diào)用接口方法
exportFileRequest(url,data) {
return axios({
method: 'post', //請求方式
responseType: 'arraybuffer', // 請求數(shù)據(jù)返回方式
// responseType: 'Blob',
url: url, // 請求地址
data: data, // 請求參數(shù)
headers: {}, // 與后臺定義的請求頭參數(shù)
});
}
下載函數(shù)
downloadEvent() {
let url = '接口地址'
let data = {} // 設(shè)置請求參數(shù)
this.exportFileRequest(url,data).then(res =>{ // 調(diào)用接口
let excelData = res.data
let url = window.URL.createObjectURL(new Blob([excelData],{type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}));
let link = document.createElement('a'); // 例用a標(biāo)簽的download屬性實現(xiàn)下載
link.style.display = 'none';
link.href = url;
link.setAttribute('download', row.fileName);
document.body.appendChild(link);// 在頁面中動態(tài)添加一個a標(biāo)簽
link.click()
document.body.removeChild(link); // 點(diǎn)擊之后刪除該dom節(jié)點(diǎn)
}).catch(error => {
console.log(error);
})
}
注：window.URL.createObjectURL
URL.createObjectURL()靜態(tài)方法會創(chuàng)建一個DOMString，其中包含一個表示參數(shù)中給出的對象的URL。這個 URL 的生命周期和創(chuàng)建它的窗口中的document綁定。這個新的URL 對象表示指定的File對象或Blob對象劲绪。
ArrayBuffer和blob
ArrayBuffer
ArrayBuffer對象用來表示通用的、固定長度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)盆赤。
它是一個字節(jié)數(shù)組贾富，通常在其他語言中稱為“byte array”。
你不能直接操作ArrayBuffer的內(nèi)容牺六，而是要通過類型數(shù)組對象或DataView對象來操作颤枪，它們會將緩沖區(qū)中的數(shù)據(jù)表示為特定的格式，并通過這些格式來讀寫緩沖區(qū)的內(nèi)容淑际。
Blob
Blob對象表示一個不可變畏纲、原始數(shù)據(jù)的類文件對象。它的數(shù)據(jù)可以按文本或二進(jìn)制的格式進(jìn)行讀取春缕，也可以轉(zhuǎn)換成ReadableStream來用于數(shù)據(jù)操作盗胀。
Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)。File接口基于Blob锄贼，繼承了 blob 的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件票灰。
要從其他非blob對象和數(shù)據(jù)構(gòu)造一個Blob，使用Blob()構(gòu)造函數(shù)宅荤。要創(chuàng)建一個 blob 數(shù)據(jù)的子集 blob屑迂，使用slice()方法。
區(qū)別
ArrayBuffer對象用來表示通用的冯键、固定長度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)惹盼。
Blob (binary large object)，他表示一個不可變琼了、原始數(shù)據(jù)的類文件對象，
blob類型只有slice方法夫晌，用于返回一個新的 Blob對象雕薪，包含了源 Blob對象中指定范圍內(nèi)的數(shù)據(jù)。
對比發(fā)現(xiàn)晓淀，ArrayBuffer的數(shù)據(jù)所袁，是可以按照字節(jié)去操作的，而Blob的只能作為一個整的對象去處理凶掰。
所以說燥爷，ArrayBuffer相比Blob更接近真實的二進(jìn)制蜈亩，更底層。
相互轉(zhuǎn)換
// arraybuffer轉(zhuǎn)blob很方便前翎，作為參數(shù)傳入就行了稚配。
var buffer = new ArrayBuffer(16)
var blob = new Blob([buffer])
//此處需要借助fileReader對象:
var blob = new Blob([1,2,3,4,5])
var reader = new FileReader()
reader.onload = function() {
console.log(this.result)
}
reader.readAsArrayBuffer(blob)
// 控制臺輸出的則是ArrayBuffer的數(shù)據(jù)了
參考文檔：
前端 ArrayBuffer 與 Blob 互轉(zhuǎn)、
MDN Blob港华、
MDN ArrayBuffer道川、
MDN URL.createObjectURL()
