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

本文主要是介绍Vue接收Asp.Net Core传递的文件并下载,接收application/octet-stream类型文件流并下载,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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();}});

下面这是我们接收的时候一般是这样通过接口让后端传值过来 ,但是这种访问后端接口返回回来的是错误的格式,正确的是需要传递一个blob类型到后端确定类

        var filename='下载.xlsx';this.axios.get("api/xxx/xxxx",this.filter).then((res)=>{let blob=new Blob([res.data],{type:res.data.type})//兼容ieif(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})//兼容ieif(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标签的hrefdownloadElement.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://blog.csdn.net/weixin_45973327/article/details/120566699

希望上述内容能帮助到你

这篇关于Vue接收Asp.Net Core传递的文件并下载,接收application/octet-stream类型文件流并下载的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/723155

相关文章

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传:从崩溃边缘抢救进度二、多线程加速:榨干网络带宽三、速度控制:做网络的好邻居四、终端交互

解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题

《解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题》:本文主要介绍解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4... 目录未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘打开pom.XM

一文详解Java Stream的sorted自定义排序

《一文详解JavaStream的sorted自定义排序》Javastream中的sorted方法是用于对流中的元素进行排序的方法,它可以接受一个comparator参数,用于指定排序规则,sorte... 目录一、sorted 操作的基础原理二、自定义排序的实现方式1. Comparator 接口的 Lam

Java Stream的distinct去重原理分析

《JavaStream的distinct去重原理分析》Javastream中的distinct方法用于去除流中的重复元素,它返回一个包含过滤后唯一元素的新流,该方法会根据元素的hashcode和eq... 目录一、distinct 的基础用法与核心特性二、distinct 的底层实现原理1. 顺序流中的去重

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled