vue使用axios接收流文件的實現
在工作中遇到使用axios接收流文件,遇到瞭一些問題,整理如下:
在調用接口成功後如圖所示:
現在需要調試下axios.js文件統一攔截
// 導出 const headers = response.headers //console.log(headers['content-type']) 將打印的值,也將後臺返回的相應頭設置成相同的,我的就是'application/octet-stream;charset=UTF-8',然後返回response if (headers['content-type'] == 'application/octet-stream;charset=UTF-8') { return response; }
現在需要註意headers[‘content-type’] 不一定是 ‘application/octet-stream;charset=UTF-8’
在接口調用時需要設置axios的相應類型,responseType: “blob”
this.axios({ method: "get", url: "/dafw/cljsdc", params: data, responseType: "blob" }) .then(res => { let blob = new Blob([_res]); let downloadElement = document.createElement("a"); let href = window.URL.createObjectURL(blob); //創建下載的鏈接 downloadElement.href = href; downloadElement.download = "xxx.xls"; //下載後文件名 document.body.appendChild(downloadElement); downloadElement.click(); //點擊下載 document.body.removeChild(downloadElement); //下載完成移除元素 window.URL.revokeObjectURL(href); //釋放掉blob對象 ...
之後就會下載成功…
到此這篇關於vue使用axios接收流文件的實現的文章就介紹到這瞭,更多相關vue axios接收流文件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 前端使用axios實現下載文件功能的詳細過程
- 一文詳解如何根據後端返回的url下載json文件
- vue導出excel文件流中文亂碼問題及解決
- js實現下載(文件流式)方法詳解與完整實例源碼
- vue如何實現二進制流文件導出excel