vue 下載爲xls表格
axios.post(
'a.bbb.cc/d/ee',//請求的url
{
'data':this.data//請求數據
},
{
responseType:'blob'//服務器返回的數據類型{必填}
}
).then((res)=>{
//此處有個坑。這裏用content保存文件流,最初是content=res,但下載的test.xls裏的內容以下圖1,
//檢查了下才發現,後端對文件流作了一層封裝,因此將content指向res.data便可
//另外,流的轉儲屬於淺拷貝,因此此處的content轉儲僅僅是便於理解,並無實際做用=_=
const content = res.data
const blob = new Blob([content])//構造一個blob對象來處理數據
const fileName = 'test.xls'//文件類型後綴能夠修改
//對於<a>標籤,只有 Firefox 和 Chrome(內核) 支持 download 屬性
//IE10以上支持blob可是依然不支持download
if ('download' in document.createElement('a')) { //支持a標籤download的瀏覽器
const link = document.createElement('a')//建立a標籤
link.download = fileName//a標籤添加屬性
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
document.body.appendChild(link)
link.click()//執行下載
URL.revokeObjectURL(link.href) //釋放url
document.body.removeChild(link)//釋放標籤
} else { //其餘瀏覽器
navigator.msSaveBlob(blob, fileName)
}
}).catch((err)=>{
console.log(err);
})
複製代碼