Vue接收Asp.Net Core傳遞的文件並下載,接收application/octet-stream類型文件流並下載

參考 https://blog.csdn.net/weixin_45973327/article/details/120565446

vue接收後端傳過來excel表格的文件流並下載題外話:當接收文件流時要確定文件流的類型,但也有例外就是application/octet-stream類型,主要是隻用來下載的類型,這個類型簡單理解意思就是通用類型類似 var 、object、array 這樣什麼都可以存的類型,傳到前端就是一堆文字沒有類型需要指定(後面說)
需要asp.net core後端代碼的可以訪問https://blog.csdn.net/weixin_45973327/article/details/120566699
首先要先看看後端傳過來的是一些什麼東西,要是傳過來就不對那不是花冤枉功夫改
這是傳過來正確格式也就是可以接收的格式(blob類型)下面這種時錯誤的格式,但不是數據出錯,是類型。上面說了這是一個通用類型,所以必須指定類型才能正確顯示
vue接收asp.core傳過來的文件流,跟asp.net視圖用a標籤點擊下載類似但不同
當然如果不考慮安全性並不需要token驗證等可以直接下載
this.axios.get("api/xxx/xxxx",this.xxx)        .then((res)=>{        if(typeof res.data.downloadId=='undefined')this.$message.error(res.data.msg);        else{        const elink=document.createElement('a');        elink.style.display='none';        elink.href='/api/地址/xxxid='+res.data.downloadId;        elink.target='_blank';        elink.click();            }        });1234567891011下面這是我們接收的時候一般是這樣通過接口讓後端傳值過來 ,但是這種訪問後端接口返回回來的是錯誤的格式,正確的是需要傳遞一個blob類型到後端確定類
        var filename='下載.xlsx';        this.axios.get("api/xxx/xxxx",this.filter)        .then((res)=>{        let blob=new Blob([res.data],{type:res.data.type})        //兼容ie        if(window.navigator && window.navigator.msSaveBlob){          window.navigator.msSaveBlob(blob,filename);        }else{          var downloadElement=document.createElement('a');          var href=window.URL.createObjectURL(blob);          downloadElement.href=href;          downloadElement.download=filename;          document.body.appendChild(downloadElement);          downloadElement.click();          window.URL.revokeObjectURL(href);        }        });1234567891011121314151617正確爲下面代碼 前端需要傳遞一個 responseType:‘blob’ 指定類型到後端處理確定類型 後端也要加一個[FromQuery]屬性,這樣前端來確定類型和後端就區分開了,後端只需要傳通用類型就可以了 注意要使用get請求,後端需要加一個字段,post請求傳遞這個類型無用
        var filename='下載.xlsx';        this.axios.get("api/xxx/xxx",{params:this.filter,responseType:'blob'})//這裏的傳遞要加responseType:'blob'指定類型,後端不需要處理這個類型,只需要傳過去就行        .then((res)=>{        let blob=new Blob([res.data],{type:res.data.type})        //兼容ie        if(window.navigator && window.navigator.msSaveBlob){          window.navigator.msSaveBlob(blob,filename);        }else{          var downloadElement=document.createElement('a');//模擬一個a標籤與asp.net試圖操作類似          var href=window.URL.createObjectURL(blob);//轉成鏈接讓其能供人下載          downloadElement.href=href;//a標籤的href          downloadElement.download=filename;//a標籤的下載名字          document.body.appendChild(downloadElement);//註冊這個控件將這個組件加到body尾部          downloadElement.click();//註銷掉          window.URL.revokeObjectURL(href);//清除生成的鏈接,會佔用一些東西,不知道啥,反正運行慢點        }        });1234567891011121314151617後端也需要處理一下讓前端能自己確定類型 加一個[FromQuery]來接收 ,不加的話get後端不接收前端請求,post又收不到類型
 public async Task<IActionResult> xxx([FromQuery]Model model)//需要加一個[FromQuery]//                                    [FromHeader]請求標頭//                                    [FromQuery]請求查詢字符串參數//                                    [FromForm]請求正文中的表單數據//                                    [FromBody]請求正文//                                    [FromRoute]當前請求中的路由//                                    [FromServices]作爲操作參數插入的請求服務1234567這樣前端就能接收到正確的格式的文件流,以下就可以看到有文件流類型並能看到格式化了不是亂糟糟一團
需要asp.net core後端代碼的可以訪問https://blog.csdn.net/weixin_45973327/article/details/120566699
希望上述內容能幫助到你————————————————版權聲明:本文爲CSDN博主「賢賢易色也」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處鏈接及本聲明。原文鏈接:https://blog.csdn.net/weixin_45973327/article/details/120565446

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章