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格式的文件啦~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Java Reactor反应器模式使用方法详解

    Reactor反应器模式 到目前为止,高性能网络编程都绕不开反应器模式.很多著名的服务器软件或者中间件都是基于反应器模式实现的,如Nginx.Redis.Netty. 反应器模式是高性能网络编程的必知.必会的模式. Reactor简介 反应器模式由Reactor反应器线程.Handlers处理器两大角色组成: (1)Reactor反应器线程的职责:负责响应IO事件,并且分发到Handlers处理器. (2)Handlers处理器的职责:非阻塞的执行业务处理逻辑. 从上面的反应器模式定义,看不出这

  • Java用文件流下载网络文件示例代码

    复制代码 代码如下: public HttpServletResponse download(String path, HttpServletResponse response) {        try {            // path是指欲下载的文件的路径.            File file = new File(path);            // 取得文件名.            String filename = file.getName();          

  • React+ajax+java实现上传图片并预览功能

    React+ajax+java实现上传图片并预览功能

    之前有在网上找ajax上传图片的资料,大部分的人写得都是用jQuery,但是在这里用JQuery就大才小用了,所以我就自己写了,先上图. 由上图,首先点击上面的选择文件,在选择图片之后,将会自动上传图片到服务器,并且返回图片名字和图片在服务器的路径,然后在页面显示文件名字和图片. 源码:ajax上传预览 React中: import React from 'react'; import Http from './http' const URL = 'http://localhost:8080/f

  • 简单了解Java Netty Reactor三种线程模型

    1. Reactor三种线程模型 1.1. 单线程模型 Reactor单线程模型,指的是所有的IO操作都在同一个NIO线程上面完成,NIO线程的职责如下: 1)作为NIO服务端,接收客户端的TCP连接: 2)作为NIO客户端,向服务端发起TCP连接: 3)读取通信对端的请求或者应答消息: 4)向通信对端发送消息请求或者应答消息. Reactor单线程模型示意图如下所示: Reactor单线程模型 由于Reactor模式使用的是异步非阻塞IO,所有的IO操作都不会导致阻塞,理论上一个线程可以独立处

  • java高效文件流读写操作详解

    java高效文件流读写操作详解

    导语 防止自己以后忘记,记录一些文件流的性能对比. 平常经常会操作到文件读写,java当中提供了许多操作文件的类,一般来说,文件操作也叫流操作,可以按照以下方式分类: 按照功能分类,字节流和字符流. 按照节点流和过滤流,节点流直接操作文件,过滤流包装了节点流和过滤流.如FileInputStream和BufferedFileInputStream就是分别是节点流和过滤流. 文件流比较 下面重点比较我们经常用的几个流 (1) DataInputStream+FileInputStream (2)

  • Java文件流关闭和垃圾回收机制

    1.先看以下一段代码 import java.io.FileInputStream; public class TTT { public static void main(String[] args) throws Exception { for (int i = 0; i < 10; i++) { final String threadId = "thread_" + i; Thread thread = new Thread(new Runnable() { public v

  • 利用JavaFX工具构建Reactive系统

    JavaFX 是Java中用来构建图形应用程序的新的标准库, 但许多程序员仍然坚持在使用Swing甚至AWT.关于如何利用JavaFX工具集中的新的超棒特性来构建响应式的快速应用程序,这里有一些建议! 1. 属性值 如果你对JavaFX组件做过完整的了解,移动遇到过属性(Property)这个东西.FX库中几乎每个值都可以被观察,分区(divider)的宽度,图片的尺寸,文本标识(label)中的文字,一个列表中的子项以及复选框(checkbox)的状态.属性分成另类:可写属性和可读属性.可写值

  • Java 读取excel 文件流代码实例

    这篇文章主要介绍了Java 读取excel 文件流代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 public static void initType(String path) { try { //1 获取excel文件流 excel xls 文件 暂不支持xlsx if (path.contains("xlsx") || path.contains("XLSX")) { System.err.

  • 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 = nu

  • RestTemplate文件上传下载与大文件流式下载

    目录 一.文件上传 二.文件下载 三.大文件下载 本文是精讲RestTemplate第6篇,前篇的blog访问地址如下: RestTemplate是HTTP客户端库,所以为了使用RestTemplate进行文件上传和下载,需要我们先编写服务端的支持文件上传和下载的程序.请参考我之前写的一篇文章:SpringBoot实现本地存储文件上传及提供HTTP访问服务 .按照此文完成学习之后,可以获得 一个以访问服务URI为"/upload”的文件上传服务端点 服务端点上传文件成功后会返回一个HTTP连接,

  • Java字节缓存流的构造方法之文件IO流

    Java字节缓存流的构造方法之文件IO流

    目录 1.字节缓冲流 1.1字节缓冲流构造方法 1.2字节流复制视频 2.字符流 2.1为什么会出现字符流 2.2编码表 2.3字符串中的编码解码问题 2.4字符流中的编码解码问题 2.5字符流写数据的5种方式 2.6字符流读数据的2种方式 2.7字符流复制Java文件 2.8字符流复制Java文件改进版 2.9字符缓冲流 2.10字符缓冲流复制Java文件 2.11字符缓冲流特有功能 2.12字符缓冲流特有功能复制Java文件 2.13IO流小结 3练习案例 3.1集合到文件 3.2文件到集合

  • SpringBoot下载Excel文件时,报错文件损坏的解决方案

    SpringBoot下载Excel文件时,报错文件损坏的解决方案

    SpringBoot下载Excel文件文件损坏 我把模板文件放在了resources目录下 maven插件打包项目的时候,默认会压缩resources目录下的文件. 服务器读取的文件流来自于压缩后的文件,而返回给浏览器时,浏览器把他当作正常的文件解析,自然不能得到正确的结果. 解决方案: 配置一下maven插件,打包的时候不要压缩模板文件,排除拓展名为xlsx的文件. <plugin> <groupId>org.apache.maven.plugins</groupId>

  • vue下载excel文件的四种方法实例

    目录 1.通过url下载 2.通过 a 标签 download 属性结合 blob 构造函数下载 3.通过 js-file-download 插件 4.使用fetch下载 总结 1.通过url下载 即后端提供文件的地址,直接使用浏览器去下载 通过window.location.href = 文件路径下载 window.location.href = `${location.origin}/operation/ruleImport/template` 通过 window.open(url, '_b

  • C# 文件上传下载(Excel导入,多线程下载)功能的实现代码

    废话不多说了,直接给大家贴代码,具体代码如下所示: //打开Excel文件,转换为DataTable DataTable dtExcel; private void OpenFile() { OpenFileDialog dialog = new OpenFileDialog(); dialog.Filter = "Microsoft Excel files(*.xls)|*.xls;*.xlsx"; //筛选打开文件类型 :图片 *.jpg|*.jpg|*.bmp|*.bmp ;&q

  • 前端axios下载excel文件(二进制)的处理方法

    需求:通过后端接口下载excel文件,后端没有文件地址,返回二进制流文件 实现:axios(ajax类似) 主要代码: axios:设置返回数据格式为blob或者arraybuffer 如: var instance = axios.creat({ ... //一些配置 responseType: 'blob', //返回数据的格式,可选值为arraybuffer,blob,document,json,text,stream,默认值为json }) 请求时的处理: getExcel().then

  • python调用java模块SmartXLS和jpype修改excel文件的方法

    本文实例讲述了python调用java模块SmartXLS和jpype修改excel文件的方法.分享给大家供大家参考.具体实现方法如下: # -*- coding: utf8 -*- """ 使用java的模块SmartXLS和jpype修改excel 和xlrd,xlwt不同的是它可以生成和保持图表 """ from __future__ import print_function, division import os import jpyp

  • PHP使用ajax的post方式下载excel文件简单示例

    本文实例讲述了PHP使用ajax的post方式下载excel文件.分享给大家供大家参考,具体如下: 项目需求,前端发起ajax请求,后端生成excel并下载,同时需要在header头中,带上token验证信息,参考了很多文章,最终实现如下: PHP后端使用base64: $filename = 'demo.xlsx'; $objWriter = \PHPExcel_IOFactory::createWriter($objectPHPExcel, 'Excel2007'); ob_start();

  • java后台利用Apache poi 生成excel文档提供前台下载示例

    java后台利用Apache poi 生成excel文档提供前台下载示例

    之前在项目中会用到在Java在后台把数据填入Word文档的模板来提供前台下载,为了自己能随时查看当时的实现方案及方便他人学习我写了这篇博客,访问量已经是我写的博客里第一了.于是乎我在学会用Java在后台利用Apache poi 生成excel文档提供前台下载之后就想着来写一篇姊妹篇啦. 在生成Excel文档的时候我采用了和生成Word时的不同方法,Apache poi.它是用Java编写的免费开源的跨平台的 Java API,提供API给Java程式对Microsoft Office格式档案读和

随机推荐