java文件流下载excel_React获取Java后台文件流并下载Excel文件流程解析

React获取Java后台文件流并下载Excel文件流程解析

此时在浏览器的调试面板中可以看到导出接口的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获取Java后台文件流并下载Excel文件流程解析相关教程