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

相关文章

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

HTTP 与 SpringBoot 参数提交与接收协议方式

《HTTP与SpringBoot参数提交与接收协议方式》HTTP参数提交方式包括URL查询、表单、JSON/XML、路径变量、头部、Cookie、GraphQL、WebSocket和SSE,依据... 目录HTTP 协议支持多种参数提交方式,主要取决于请求方法(Method)和内容类型(Content-Ty

Python中Json和其他类型相互转换的实现示例

《Python中Json和其他类型相互转换的实现示例》本文介绍了在Python中使用json模块实现json数据与dict、object之间的高效转换,包括loads(),load(),dumps()... 项目中经常会用到json格式转为object对象、dict字典格式等。在此做个记录,方便后续用到该方

SpringBoot请求参数传递与接收示例详解

《SpringBoot请求参数传递与接收示例详解》本文给大家介绍SpringBoot请求参数传递与接收示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋... 目录I. 基础参数传递i.查询参数(Query Parameters)ii.路径参数(Path Va

Java Stream 并行流简介、使用与注意事项小结

《JavaStream并行流简介、使用与注意事项小结》Java8并行流基于StreamAPI,利用多核CPU提升计算密集型任务效率,但需注意线程安全、顺序不确定及线程池管理,可通过自定义线程池与C... 目录1. 并行流简介​特点:​2. 并行流的简单使用​示例:并行流的基本使用​3. 配合自定义线程池​示

从原理到实战解析Java Stream 的并行流性能优化

《从原理到实战解析JavaStream的并行流性能优化》本文给大家介绍JavaStream的并行流性能优化:从原理到实战的全攻略,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的... 目录一、并行流的核心原理与适用场景二、性能优化的核心策略1. 合理设置并行度:打破默认阈值2. 避免装箱

Java中的stream流分组示例详解

《Java中的stream流分组示例详解》Java8StreamAPI以函数式风格处理集合数据,支持分组、统计等操作,可按单/多字段分组,使用String、Map.Entry或Java16record... 目录什么是stream流1、根据某个字段分组2、按多个字段分组(组合分组)1、方法一:使用 Stri