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})
        //兼容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

希望上述内容能帮助到你