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

 更新时间:2020年06月17日 10:26:54   作者:不少于4个字节  
这篇文章主要介绍了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服务器渲染详解

    从零开始最小实现react服务器渲染详解

    这篇文章主要介绍了从零开始最小实现react服务器渲染详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • React实现文件分片上传和下载的方法详解

    React实现文件分片上传和下载的方法详解

    在当今的前端开发中,处理文件流操作已经成为一个常见的需求,无论是上传、下载、读取、展示还是其他的文件处理操作,都需要高效且可靠地处理二进制数据,本文将深入探讨如何使用 React 实现文件分片上传和下载,并介绍相关的基本概念和技术,需要的朋友可以参考下
    2023-08-08
  • 解决React报错useNavigate() may be used only in context of Router

    解决React报错useNavigate() may be used only in context of

    这篇文章主要为大家介绍了解决React报错useNavigate() may be used only in context of Router,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • react-router v6实现权限管理+自动替换页面标题的案例

    react-router v6实现权限管理+自动替换页面标题的案例

    这篇文章主要介绍了react-router v6实现权限管理+自动替换页面标题,这次项目是有三种权限,分别是用户,商家以及管理员,这次写的权限管理是高级权限能访问低级权限的所有页面,但是低级权限不能访问高级权限的页面,需要的朋友可以参考下
    2023-05-05
  • React生命周期与父子组件间通信知识点详细讲解

    React生命周期与父子组件间通信知识点详细讲解

    生命周期函数指在某一时刻组件会自动调用并执行的函数。React每个类组件都包含生命周期方法,以便于在运行过程中特定的阶段执行这些方法
    2022-11-11
  • react-native只保留3x图原理解析

    react-native只保留3x图原理解析

    这篇文章主要为大家介绍了react-native只保留3x图原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 初识React及React开发依赖详解

    初识React及React开发依赖详解

    React由Facebook来更新和维护,它是大量优秀程序员的思想结晶,React的流行不仅仅局限于普通开发工程师对它的认可,大量流行的其他框架借鉴React的思想,接下来通过本文介绍React基础及React开发依赖介绍,需要的朋友可以参考下
    2022-10-10
  • 详解基于webpack搭建react运行环境

    详解基于webpack搭建react运行环境

    本篇文章主要介绍了详解基于webpack搭建react运行环境,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • React根据当前页面路由进行自动高亮示例代码

    React根据当前页面路由进行自动高亮示例代码

    要根据当前页面路由自动高亮顶部菜单项,可以使用 React Router 的 useLocation 钩子来获取当前路径,并根据路径动态设置菜单项的高亮效果,本文给大家介绍了一个完整的示例,展示如何根据当前页面路由自动高亮顶部菜单项,需要的朋友可以参考下
    2024-07-07
  • 关于react-router-dom路由入门教程

    关于react-router-dom路由入门教程

    这篇文章主要介绍了关于react-router-dom路由入门教程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03

最新评论