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

相关文章

HTML5的input标签的`type`属性值详解和代码示例

《HTML5的input标签的`type`属性值详解和代码示例》HTML5的`input`标签提供了多种`type`属性值,用于创建不同类型的输入控件,满足用户输入的多样化需求,从文本输入、密码输入、... 目录一、引言二、文本类输入类型2.1 text2.2 password2.3 textarea(严格

C#借助Spire.XLS for .NET实现在Excel中添加文档属性

《C#借助Spire.XLSfor.NET实现在Excel中添加文档属性》在日常的数据处理和项目管理中,Excel文档扮演着举足轻重的角色,本文将深入探讨如何在C#中借助强大的第三方库Spire.... 目录为什么需要程序化添加Excel文档属性使用Spire.XLS for .NET库实现文档属性管理Sp

MyBatis中的两种参数传递类型详解(示例代码)

《MyBatis中的两种参数传递类型详解(示例代码)》文章介绍了MyBatis中传递多个参数的两种方式,使用Map和使用@Param注解或封装POJO,Map方式适用于动态、不固定的参数,但可读性和安... 目录✅ android方式一:使用Map<String, Object>✅ 方式二:使用@Param

SpringBoot返回文件让前端下载的几种方式

《SpringBoot返回文件让前端下载的几种方式》文章介绍了开发中文件下载的两种常见解决方案,并详细描述了通过后端进行下载的原理和步骤,包括一次性读取到内存和分块写入响应输出流两种方法,此外,还提供... 目录01 背景02 一次性读取到内存,通过响应输出流输出到前端02 将文件流通过循环写入到响应输出流

SpringBoot+Vue3整合SSE实现实时消息推送功能

《SpringBoot+Vue3整合SSE实现实时消息推送功能》在日常开发中,我们经常需要实现实时消息推送的功能,这篇文章将基于SpringBoot和Vue3来简单实现一个入门级的例子,下面小编就和大... 目录前言先大概介绍下SSE后端实现(SpringBoot)前端实现(vue3)1. 数据类型定义2.

C# WebAPI的几种返回类型方式

《C#WebAPI的几种返回类型方式》本文主要介绍了C#WebAPI的几种返回类型方式,包括直接返回指定类型、返回IActionResult实例和返回ActionResult,文中通过示例代码介绍的... 目录创建 Controller 和 Model 类在 Action 中返回 指定类型在 Action

SpringCloud Stream 快速入门实例教程

《SpringCloudStream快速入门实例教程》本文介绍了SpringCloudStream(SCS)组件在分布式系统中的作用,以及如何集成到SpringBoot项目中,通过SCS,可... 目录1.SCS 组件的出现的背景和作用2.SCS 集成srping Boot项目3.Yml 配置4.Sprin

前端Visual Studio Code安装配置教程之下载、汉化、常用组件及基本操作

《前端VisualStudioCode安装配置教程之下载、汉化、常用组件及基本操作》VisualStudioCode是微软推出的一个强大的代码编辑器,功能强大,操作简单便捷,还有着良好的用户界面,... 目录一、Visual Studio Code下载二、汉化三、常用组件1、Auto Rename Tag2

C#借助Spire.XLS for .NET实现Excel工作表自动化样式设置

《C#借助Spire.XLSfor.NET实现Excel工作表自动化样式设置》作为C#开发者,我们经常需要处理Excel文件,本文将深入探讨如何利用C#代码,借助强大的Spire.XLSfor.N... 目录为什么需要自动化工作表样式使用 Spire.XLS for .NET 实现工作表整体样式设置样式配置

Python包管理工具uv下载python版本慢问题解决办法

《Python包管理工具uv下载python版本慢问题解决办法》uv是一个非常快的Python包和项目管理器,用Rust编写,使用热缓存安装Trio的依赖项的速度对比,:本文主要介绍Python包... 目录发现问题对于 MACOS / linux 用户 (zsh/bash):对于 Windows 用户:总