react接收后端文件_React获取Java后台文件流并下载Excel文件流程解析

记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下。

首先在java后台中设置response中的参数:

public void exportExcel(HttpServletResponse response, String fileName, String sheetName,

List titleRow, List> dataRows) {

OutputStream out = null;

try {

// 设置浏览器解析文件的mime类型,如果js中已设置,这里可以不设置

// response.setContentType("application/vnd.ms-excel;charset=gbk");

// 设置此项,在IE浏览器中下载Excel文件时可弹窗展示文件下载

response.setHeader("Content-Disposition",

"attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));

// 允许浏览器访问header中的FileName

response.setHeader("Access-Control-Expose-Headers", "FileName");

// 设置FileName,转码防止中文乱码

response.setHeader("FileName", URLEncoder.encode(fileName, "UTF-8"));

out = response.getOutputStream();

ExcelUtils.createExcelStream(out, sheetName, titleRow, dataRows);

out.close();

} catch (Exception e) {

if (Objects.nonNull(out)) {

try {

out.close();

} catch (IOException e1) {

log.error("导出失败", e);

}

}

throw Exceptions.fail(ErrorMessage.errorMessage("500", "导出失败"));

}

}

此时在浏览器的调试面板中可以看到导出接口的response header参数如下:

access-control-allow-credentials: true

access-control-allow-methods: GET,POST,PUT,DELETE,OPTIONS

access-control-allow-origin: http://local.dasouche-inc.net:8081

access-control-expose-headers: FileName

connection: close

content-type: application/vnd.ms-excel;charset=gbk

date: Sun, 29 Mar 2020 10:59:54 GMT

filename: %E4%B8%BB%E6%92%AD%E5%88%97%E8%A1%A8166296222340726.xlsx

接下来我们在前端代码中获取文件流:

handleExport = () => {

axios.post(`下载文件的接口请求路径`, {}, {

params: {

参数名1: 参数值1,

参数名2: 参数值2

},

// 设置responseType对象格式为blob

responseType: "blob"

}).then(res => {

// 创建下载的链接

const url = window.URL.createObjectURL(new Blob([res.data],

// 设置该文件的mime类型,这里对应的mime类型对应为.xlsx格式

{type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}));

const link = document.createElement('a');

link.href = url;

// 从header中获取服务端命名的文件名

const fileName = decodeURI(res.headers['filename']);

link.setAttribute('download', fileName);

document.body.appendChild(link);

link.click();

});

};

至此就可以愉快地下载xlsx格式的文件啦~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持易采站长站。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/455197.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python常见的170道面试题全解析答案

个人博客点这里 语言特性 1. 谈谈对 Python 和其他语言的区别 答:Python 是一门语法简洁优美,功能强大无比,应用领域非常广泛,具有强大完备的第三方库,他是一门强类型的可移植、可扩展,可嵌入的解释型编程语言,属于动态语言。 …

WMA文件信息格式分析及代码

WMA文件信息格式分析及代码 收藏 ASF文件和WMA文件格式差不多。具体请看下面我写的代码。文件分析根据mplayer其中的asfhead.c提供的代码进行分析。mplayer只解除出了标准的wma头信息,其扩展信息并没有解析出来。代码如下. /*每一个WMA文件,它的头16个字…

[No0000101]JavaScript-基础课程1

JavaScript 是一种轻量级的编程语言,很容易学习,同时也是一种被广泛用于客户端Web开发的脚本语言。通过本课程学习,我们可以了解到JavaScript的基本语法知识,以及怎样使用它去创建简单的游戏和应用。 1.获取字符的长度 "youN…

研究人员发现Office Word 0Day攻击 这个漏洞绕过了word宏安全设置 绿盟科技、McAfee及FireEye发出警告...

这次的0Day漏洞确实很厉害,以往攻击者诱使用户点击Word文档,由于其中包含了恶意脚本,大多数需要用户启用了宏。但这次的漏洞不是,受害者无需启用宏,也会中招,而且漏洞覆盖Windows所有版本(包括W…

秀米svg点击显示另一张图_SVG的雷,你踩过了没?

原标题:SVG的雷,你踩过了没?随着SVG互动布局的出现和在H5的应用越来越多,不少小伙伴们会想在秀米里上传自己制作的SVG图形。秀米的首页顶部教程收录了一篇关于SVG图形的讲解:「秀米的SVG图片」,里面主要介绍…

关于C10K问题详解-突破单机性能是高性能网络编程

本文转自:https://www.jianshu.com/p/ba7fa25d3590 C10K问题由来 随着互联网的普及,应用的用户群体几何倍增长,此时服务器性能问题就出现。最初的服务器是基于进程/线程模型。新到来一个TCP连接,就需要分配一个进程。假如有C10K,…

数据中心传输需求成以太网市场巨大推动力

近日,市场研究机构Infonetics作出评估称,数据中心以太网市场将迎来全面发展的势头,其驱动力则在于当前数据中心以太网络交换接口由10Gbps产品向25Gbps乃至50Gbps标准的大规模升级。 根据对2014年第三季度的市场销售情况研究,该公司…

Gina DLL

Windows的开机密码认证模块一般是由Gina DLL完成的。在NT/2000中交互式的登陆支持是由WinLogon调用GINA DLL实现的,GINA DLL提供了一个交互式的界面为用户登陆提供认证请求。1.Gina原理WinLogon会和GINA DLL进行交互,缺省是MSGINA.DLL(在System32目录下)…

ultilize什么意思_ultilize是什么意思

1. We also ultilize the supports of NSFC for other valuable researches.我们还利用基金支持,做了其他一些有价值的科研工作。2. Recover the second segment with all due haste, ultilize any means necessary.尽快取回第二部分,使用任何必要的手段…

HTML,CSS的class与id命名规则

个人博客点这里 最重要的部分先说(命名书写格式) 常见的格式有:连接符(search-btn)、下划线、全小(searchbox)、小驼峰(searchBox)。 现在用得多广泛的还是第一种使用连接符,易读…

主打“云安全” 迅雷系帝恩思登陆新三板

ZD至顶网安全频道 06月14日 综合消息: 6月14日上午,帝恩思(837018)敲响了登陆新三板的钟声。作为帝恩思的重要股东,迅雷(NASDAQ:XNET)CEO邹胜龙与帝恩斯董事长王宇杰、总经理许渊培等人一同参加了这一仪式。 帝恩斯是一…

UESTC 1636 梦后楼台高锁,酒醒帘幕低垂

题意&#xff1a;求一条路径&#xff0c;使得这条边连接1到n&#xff0c;求边权值的最大值与最小值的差 题解&#xff1a;最小生成树&#xff0c;对边权排序&#xff0c;可以枚举边的最大和最小的值&#xff0c;判断能否使得1和n连通 #include <bits/stdc.h> #define ll …

wav文件格式分析详解

wav文件格式分析详解 作者&#xff1a;曹京日期&#xff1a;2006年7月17日 一、综述 WAVE文件作为多媒体中使用的声波文件格式之一&#xff0c;它是以RIFF格式为标准的。RIFF是英文Resource Interchange File Format的缩写&#xff0c;每个WAVE文件的头四个字节便是“RIFF…

pg数据库开启远程连接_Postgresql开启远程访问的步骤全纪录

前言安装PostgreSQL数据库之后&#xff0c;默认是只接受本地访问连接。如果想在其他主机上访问PostgreSQL数据库服务器&#xff0c;就需要进行相应的配置。下面话不多说了&#xff0c;来一起看看详细的介绍吧。步骤如下&#xff1a;要在Postgresql中允许远程访问,需要设置如下2…

Vue.js前后端分离2

个人博客点这里 内容回顾 - 过滤器 - 局部的过滤器 // 只能在当前组件内部使用 filters:function(val,a,b){// 执行过滤处理逻辑,(添油加醋的内容)return xxx; }- 全局的过滤器 // 声明创建 在任何组件中都能使用 Vue.filter("myTime",function() {// 添油加醋的…

WORD列表缩进的文本起始点

Figure 1 Figure 2 Figure 3 编号位置以刻度尺为起点0.74厘米&#xff08;2个字符间距&#xff09;&#xff0c;文本缩进以刻度尺为起点2.96厘米&#xff08;8个字符间距&#xff09; 以上两者相减得到的值正好特殊格式悬挂缩进的值2.22厘米 Figure 4 上图看到&#xff0c;文本…

无人车火了 百度是如何做到的?

ZD至顶网服务器频道 03月02日 新闻消息&#xff08;文/于泽&#xff09;&#xff1a;百度无人车可谓狠狠的吸足了大众的眼球。一个问题逐渐出现在我们心中&#xff0c;为什么百度这样的互联网企业会推出无人车&#xff0c;似乎搜索引擎和无人车之间的关联度并不是很高。 谜题的…

测绘技术设计规定最新版_测绘技术设计规定

《》是中国测绘出版社出版图书&#xff0c;下面小编给大家介绍关于的相关资料&#xff0c;希望对您有所帮助。《》内容国家测绘地理信息局法规与行业管理司编著的《(2014)》是一本关于测绘资质管理规定和测绘资质分级标准的书。具体内容包括&#xff1a;大地测量专业标准、测绘…

各类音频格式解析

CD格式&#xff1a;天籁之音 当今世界上音质最好的音频格式是什么&#xff1f;当然是CD了。因此要讲音频格式&#xff0c;CD自然是打头阵的先锋。在大多数播放软件的“打开文件类型”中&#xff0c;都可以看到&#xff0a;.cda格式&#xff0c;这就是CD音轨了。标准CD格式也就是…

Error: Java heap space

在chd中 的hive中执行 (select count (*)) 或者mr程序都报Error: Java heap space 4、io.sort.mb 的作用 排序所使用的内存数量。 默认值&#xff1a;100M&#xff0c;需要与mapred.child.java.opts相配 默认&#xff1a;-Xmx200m。 不能超过mapred.child.java.opt设置&…