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=" + de(fileName, "UTF-8"));
// 允许浏览器访问header中的FileName
response.setHeader("Access-Control-Expose-Headers", "FileName");
// 设置FileName,转码防⽌中⽂乱码
response.setHeader("FileName", de(fileName, "UTF-8"));
out = OutputStream();
out.close();
} catch (Exception e) {
if (Null(out)) {
try {
out.close();
} catch (IOException e1) {
<("导出失败", e);
}
}
throw Exceptions.Message("500", "导出失败"));
}
}
此时在浏览器的调试⾯板中可以看到导出接⼝的response header参数如下:
接下来我们在前端代码中获取⽂件流:
handleExport = () => {
axios.post(`下载⽂件的接⼝请求路径`, {}, {
params: {
参数名1: 参数值1,
参数名2: 参数值2
},
// 设置responseType对象格式为blob
responseType: "blob"
}).then(res => {
// 创建下载的链接
const url = ateObjectURL(new Blob([res.data],
// 设置该⽂件的mime类型,这⾥对应的mime类型对应为.xlsx格式
{type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}));
const link = ateElement('a');
link.href = url;
// 从header中获取服务端命名的⽂件名
const fileName = decodeURI(res.headers['filename']);
link.setAttribute('download', fileName);
document.body.appendChild(link);
java浏览器下载link.click();
});
};
⾄此就可以愉快地下载xlsx格式的⽂件啦~
以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。