后端返回二進制文件流時,比如獲取后端返回的excel表格,前端一般接到的時一堆亂碼數據,
這里介紹下axios post 獲取文件的方法
首先這里一定要記得!記得!記得設置 responseType ,否則能成功下載excel表格,但是不可打開,內部有錯誤
主要代碼如下,主要是關於blob的使用
this.axios
.post(this.baseUrl+"/exportUser", { admin: "",keys: "",keyword:this.keyword,},{responseType: 'blob'})
.then(function(response) {
var blob = new Blob([response.data])
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob); //創建下載的鏈接
downloadElement.href = href;
downloadElement.download = '用戶數據.xlsx'; //下載后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //點擊下載
document.body.removeChild(downloadElement); //下載完成移除元素
window.URL.revokeObjectURL(href); //釋放掉blob對象
console.log(response);
})
.catch(function(error) {
console.log(error);
});
ps:在下載的過程中,會有一個文件名的問題;這里后端把它放到了header里面,但是axios的res.header並不能獲取:
而瀏覽器中是這樣的
最后找到了解決方法:
只需要在服務器端header里面設置
Access-Control-Expose-Headers: Content-Disposition