本次下載是后臺文件流傳輸，前端下載，前端將拿到的下載id和名稱downloadName傳遞給下載方法；如果是多個下載，可以采用數組for循環

情景描述：
1.如果符合導出條件， 后端直接返回數據流，如下圖所示的一堆看不懂的東西：

2.不滿足導出條件， 則后端返回JSON， 并附上失敗原因， 前端需要將失敗原因展示出來

解決問題：

• 兼容ie瀏覽器下載報傳遞給系統調用的數據區域太小.
• 解決blob下載文件，文件下載失敗將blob的錯誤信息轉換成json格式

//下載downloadFile() {let obj = {loginUser: this.$store.state.loginUser,id: this.visibleId,};axios.post(this.$store.state.windowCONTENT + "myDownload/downloadFile",obj,{responseType: "blob",}).then((res) => {// console.log(res.data.type);// alert(res.data.type);//此時有點兩種情況，1.后端返回的是個對象而不是文件，但是被我們獲取時候轉成了blob，導致我們沒法做判斷。//例如{data:"參數異常,無下載權限",message:"INPUT_PARAMETER_CHECK_ERROR",success:7}//故需要將獲取到的blob類型做判斷，如果是application/json ---谷歌下的對象轉blob的類型，或者application/json;charset=utf-8---ie下的對象轉blob的類型//然后在再講此blob轉成原對象做判斷if (res.data.type.includes('application/json')) {//以下部分代碼是將原來的{}json對象轉成的blob文件流，重新再讀寫成json對象做判斷let reader = new FileReader()reader.onload = (event) => {let content = JSON.parse(reader.result)console.log(content);let message = content.message // 錯誤信息let status = content.success //狀態碼// 錯誤處理--根據后端實際返回的對象做判斷if (status == 7) {alert(message);} else if (status == 9) {}}reader.readAsText(res.data)return true} else {if ("msSaveOrOpenBlob" in navigator) {//兼容ie瀏覽器下載報傳遞給系統調用的數據區域太小.var data = res.data;var blob = new Blob([data], { type: "application/vnd.ms-excel" });window.navigator.msSaveOrOpenBlob(blob, this.downloadName);return;} else {// console.log(res.data);const blob = res.data;const reader = new FileReader();reader.readAsDataURL(blob);reader.onload = (e) => {const a = document.createElement("a");a.download = this.downloadName; //點擊下載時候傳遞過來的文件名稱包括本身的格式 例如 幫助文檔.doca.href = e.target.result;// console.log(e.target.result);document.body.appendChild(a);a.click();document.body.removeChild(a);};}}}).catch((err) => {console.log(err.message);});},

• 可參考鏈接

2.地址欄方式下載：一般接口返回下載地址

// 下載download(id) {queryPdf(id).then(res => {if (res.code === 200) {const a = document.createElement('a')a.style.display = 'none'a.setAttribute('href', res.data)a.click()}})},

總結

以上是生活随笔為你收集整理的vue-axios下载文件流blob，ie下载报传递给系统调用的数据区域太小.ie文件流下载报错；文件下载失败将blob的错误信息转换成json格式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。