React获取Java后台文件流并下载Excel文件流程解析
记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下。
首先在java后台中设置response中的参数:
public void exportExcel(HttpServletResponse response, String fileName, String sheetName,
List<String> titleRow, List<List<String>> 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格式的文件啦~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
react-json-editor-ajrm解析错误与解决方案
由于历史原因,项目中 JSON 编辑器使用的是 react-json-editor-ajrm,近期遇到一个严重的展示错误,传入编辑器的数据与展示的不一致,这是产品和用户不可接受的,本文给大家介绍了react-json-editor-ajrm解析错误与解决方案,需要的朋友可以参考下2024-06-06
React Native中的RefreshContorl下拉刷新使用
本篇文章主要介绍了React Native中的RefreshContorl下拉刷新使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-10-10
React-Native之TextInput组件的设置以及如何获取输入框的内容
这篇文章主要介绍了React-Native之TextInput组件的设置以及如何获取输入框的内容问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-05-05
react+axios实现github搜索用户功能(示例代码)
这篇文章主要介绍了react+axios实现搜索github用户功能,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-09-09


最新评论