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
希望上述内容能帮助到你
Vue接收后端传过来excel表格的文件流并下载的更多相关文章
- js要怎么接收后端传的excel文件流?
方法1: 无需js,直接用a标签去接你的输出流 <a href="<你的返回流的Action路径>" >下载</a> 方法2:使用js,前提是你 ...
- Java操作Jxl实现导出数据生成Excel表格数据文件
实现:前台用的框架是Easyui+Bootstrap结合使用,需要引入相应的Js.Css文件.页面:Jsp.拦截请求:Servlet.逻辑处理:ClassBean.数据库:SQLserver. 注意: ...
- js接收文件流并下载
js接收文件流并下载 标签(空格分隔): js 在此输入正文 <script type="text/javascript"> function download(fil ...
- vue项目使用js-xlsx进行excel表格的导入和导出方法的简单原型封装
前提:已经安装好 file-saver xlsx和 script-loader,如未安装,请查看 https://www.cnblogs.com/luyuefeng/p/8031597.html 新建 ...
- 图片上传利用request.getInputStream()获取文件流时遇到的问题
图片上传功能是我们web里面经常用到的,获得的方式也有很多种,这里我用的是request.getInputStream()获取文件流的方式.想要获取文件流有两种方式,附上代码 int length = ...
- Vue导出json数据到Excel表格
一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二. ...
- 从数据库的表导出到Excel表格中【让客户端下载的Excel】
原文发布时间为:2008-10-11 -- 来源于本人的百度文章 [由搬家工具导入] 这个例子是从gridview中导出到Excel,可以举一反三,可以直接从数据库中取值放在DataSet中,然后再从 ...
- 精讲RestTemplate第6篇-文件上传下载与大文件流式下载
本文是精讲RestTemplate第6篇,前篇的blog访问地址如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 精讲RestTemplate第2篇-多种底层H ...
- 如何在SimpleNVR用Excel表格将通道配置简单化
进入本世纪的第三个十年,流媒体们"绞尽脑汁",依靠技术不断提升用户的体验感.熟悉SimpleNVR的用户都知道,目前SimpleNVR已实现对接自有流媒体服务器平台,不限制观看人数 ...
随机推荐
- jvm学习笔记:类加载过程
类加载器子系统 类加载器的作用是加载class文件到内存 加载阶段->链接阶段->初始化阶段 ClassLoader只负责class文件的加载,至于是否能够运行由执行引擎判断 加载的类信息 ...
- jsPlumb开发流程设计器
前言 jsPlumb是一款开源软件,但jsPlumb toolkit是收费的. 本文主要使用jsPlumb实现一些简单的流程设计功能. 基础学习 首先引入jsplumb.min.js. <scr ...
- find用法 以及和exec xargs 的组合使用
1.查找当前目录下所有的txt的文件 [root@master1 ~]# find . -name "*.txt" -type f ./a.txt ./b.txt 2.exec 结 ...
- 在树莓派用C#+Winform实现传感器监测
最近学校里发了个任务,说要做一个科技节小发明,然后我就掏出我的树莓派准备大干一场. 调料 Raspberry Pi 3B+ 树莓派GPIO扩展板 3.5寸电容触摸屏(GPIO接口) 土壤湿度传感器(G ...
- Elasticsearch(ES)的高级搜索(DSL搜索)(上篇)
1. 概述 之前聊了一下 Elasticsearch(ES)的基本使用,今天我们聊聊 Elasticsearch(ES)的高级搜索(DSL搜索),由于DSL搜索内容比较多,因此分为两篇文章完成. 2. ...
- html2canvas实现截取指定区域或iframe的区域
官网文档: http://html2canvas.hertzen.com/ 使用的是 jquery 3.2.1 html2canvas 1.0.0-rc.7 截取根据id的指定区域: var ca ...
- js特效代码-onmouseover/onclick 改变标签(背景)颜色
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- Docker系列(16)- 容器数据卷
什么是容器数据卷 docker的理念回顾 将应用和环境打包成一个镜像 数据?如果数据都在容器中,那么我们容器删除,数据就会丢失!新增一个需求:数据可以持久化 MySQL,容器删了等于删库跑路!新增一个 ...
- P7736-[NOI2021]路径交点【LGV引理】
正题 题目链接:https://www.luogu.com.cn/problem/P7736 题目大意 有\(k\)层的图,第\(i\)层有\(n_i\)个点,每层的点从上到下排列,层从左到右排列.再 ...
- P4201-[NOI2008]设计路线【结论,树形dp】
正题 题目链接:https://www.luogu.com.cn/problem/P4201 题目大意 给出\(n\)个点的一棵树开始所有边都是白色,选出若干条没有公共点的路径将上面所有边变为黑色. ...