question：當(dāng)我們使用Ajax去調(diào)用后臺(tái)接口挣菲，導(dǎo)出Excel等其他二進(jìn)制文件時(shí)己单， 在瀏覽器控制臺(tái)中是無(wú)法獲取的就像下圖這樣
image
原因是Ajax無(wú)法獲取后端返回的文件流格式, 那么如何才能獲取到后臺(tái)返回的數(shù)據(jù)呢?
方法一：不使用Ajax發(fā)送請(qǐng)求，通過(guò)將接口請(qǐng)求地址放到url請(qǐng)求欄的方式獲取
window.location.href = " url請(qǐng)求地址"
但是這種方法并沒(méi)有通過(guò)Ajax去發(fā)送請(qǐng)求纹份，可能會(huì)帶來(lái)一些問(wèn)題廷痘。
- 使用axios封裝Ajax的就不會(huì)走攔截器。
- 如果公司封裝的http元暴，有些可能存在鑒權(quán)的問(wèn)題兄猩。
方法二：通過(guò)Ajax請(qǐng)求接口，然后通過(guò)Blob對(duì)象接收鸠姨，并通過(guò)a標(biāo)簽的href屬性來(lái)下載二進(jìn)制文件
// 請(qǐng)求后臺(tái)接口數(shù)據(jù)
const res = await getExcel(params);
// 將數(shù)據(jù)存放到 Blob 對(duì)象中
const b = new Blob([res],{
type: 'application/vnd.ms-excel'
})
//創(chuàng)建一個(gè)空的 a 標(biāo)簽
let a = document.createElement('a');
// 將 blob 文件轉(zhuǎn)化為 url 格式并賦值給a標(biāo)簽的 href 屬性
a.href = URL.createObjectURL(b)
// 給a標(biāo)簽設(shè)置下載鏈接并命名
a.setAttribute('download', 'excel.xls');
// 點(diǎn)擊事件觸發(fā) href
a.click();
// 清除 a 標(biāo)簽
a = null
