Vue接收后端傳過來excel表格的文件流並下載

題外話：當接收文件流時要確定文件流的類型，但也有例外就是application/octet-stream類型，主要是只用來下載的類型，這個類型簡單理解意思就是通用類型類似 var 、object、array 這樣什么都可以存的類型，傳到前端就是一堆文字沒有類型需要指定（后面說）

 

需要asp.net core后端代碼的可以訪問https://www.cnblogs.com/liaote/p/15411667.html

首先要先看看后端傳過來的是一些什么東西，要是傳過來就不對那不是花冤枉功夫改

這是傳過來正確格式也就是可以接收的格式（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();
            }
        });

 

下面這是我們接收的時候一般是這樣通過接口讓后端傳值過來 ，但是這種訪問后端接口返回回來的是錯誤的格式，正確的是需要傳遞一個blob類型到后端確定類

       var filename='下載.xlsx';
        this.axios.get("api/xxx/xxxx",this.filter)
        .then((res)=>{
        let blob=new Blob([res.data],{type:res.data.type})//手動定義let blob = new Blob([res.data], {type: "application/vnd.ms-excel",});
        //兼容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);
        }
       });

 

正確為下面代碼 前端需要傳遞一個 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);//清除生成的鏈接，會占用一些東西，不知道啥，反正運行慢點
        }
        });

 

后端也需要處理一下讓前端能自己確定類型 加一個[FromQuery]來接收 ，不加的話get后端不接收前端請求，post又收不到類型

 public async Task<IActionResult> xxx([FromQuery]Model model)//需要加一個[FromQuery]
//                                    [FromHeader]    請求標頭
//                                    [FromQuery]    請求查詢字符串參數
//                                    [FromForm]    請求正文中的表單數據
//                                    [FromBody]    請求正文
//                                    [FromRoute]    當前請求中的路由
//                                    [FromServices]    作為操作參數插入的請求服務

 

這樣前端就能接收到正確的格式的文件流，以下就可以看到有文件流類型並能看到格式化了不是亂糟糟一團

 

需要asp.net core后端代碼的可以訪問https://www.cnblogs.com/liaote/p/15411667.html

 

希望上述內容能幫助到你