ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

Vue接收Asp.Net Core传递的文件并下载,接收application/octet-stream类型文件流并下载

2022-01-26 21:00:37  阅读:204  来源: 互联网

标签:文件 res window href blob downloadElement 类型 接收 下载


参考 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

标签:文件,res,window,href,blob,downloadElement,类型,接收,下载
来源: https://www.cnblogs.com/dare/p/15848115.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有