Web流式下载数据时展示提示信息
以Web方式下载数据有多种场景：
1.服务端本身已经存在文件，此时只需要一个文件访问地址即可下载，比如：将文件URL设置为<a>标签的href属性即可，点击<a>标签就能立即触发浏览器下载文件，此时无需单独设置下载提示信息。
2.下载的文件在服务端并不存在，而是需要查询数据库等才能获取，这种方式无法直接在客户端设置一个文件访问URL，通常是以流式方式下载数据，这就是本篇博文要阐述的情景。
在大多数需要以流方式下载/导出文件的场景，从客户端发出请求，到浏览器端开始下载文件这一段间隔里，是不会有任何提示的，查看网络请求也是处于“Pending”状态的。
甚至有时候因为服务端查询数据耗时慢等问题会让用户误以为没有触发下载，于是又重复点击按钮，在导出大量数据的场景，这可能会加剧服务端的处理负担。
实际上，这却又是一个常见且普遍的问题。
之所以会出现这样的情况，就是因为当我们在浏览器端点击“下载/导出”按钮的时候没有给予用户一个明确的提示信息，或者说没有通过一种有效的手段来防止用户出现重复点击的情况。
那么对于这种以流式方式下载文件的情况，又该如何来实现当用户点击按钮后到浏览器出现下载提示这段时间给予用户一个明确的提示呢？
有一篇博文web程序下载文件添加等待加载效果阐述了使用iframe框架来实现这一功能，但经过实验并未成功。
直到看到另一篇博文前后端分离，前端获取文件流下载文件介绍的方式，经过实验发现，这种方式确实有效。
于是把该博文介绍的方式以一个完整的示例（使用EasyExcel导出表格）整理出来，提供给大家参考（基于Chrome浏览，版本：103.0.5060.134）。
展示效果如下：
服务端核心代码：
// 以流的方式下载文件
@RequestMapping("/download")
public String download(HttpServletRequest request, HttpServletResponse response,
@RequestParam("name") String name,
@RequestParam("age") int age) throws IOException {
System.out.println(String.format("name:%s, age:%s", name, age));
String fileName = URLEncoder.encode(String.format("%s_%s.xlsx", "导出数据", System.currentTimeMillis()), "UTF-8");
response.reset();
response.addHeader("Content-Disposition", "attachment;filename=" + fileName);
response.addHeader("filename", fileName); // 注意：这里一定要在响应消息头中设置下载文件名
response.setContentType("application/octet-stream; charset=UTF-8");
try {
// 模拟查询数据耗时
Thread.sleep(new Random().nextInt(10000));
} catch (InterruptedException e) {
e.printStackTrace();
}
EasyExcel.write(response.getOutputStream(), SubjectExport.class).sheet("sheet").doWrite(dataList);
return null;
}
前端代码：
<html>
<body>
<div>
<form id="paramForm">
<input type="hidden" name="name" value="zhangsan" />
<input type="hidden" name="age" value="12" />
</form>
</div>
<div>
<button id="btnDownloadXhr">导出</button>
</div>
</body>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery.blockUI/2.66.0-2013.10.09/jquery.blockUI.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btnDownloadXhr").click(function () {
downloadXhr();
})
})
function downloadXhr() {
var url = "/download";
var param = $("#paramForm").serialize();
var xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
xhr.responseType = "blob";
xhr.onload = function () {
console.log("加载完毕");
$.unblockUI();
if (xhr.status === 200) {
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob);
var filename = decodeURI(this.getResponseHeader('filename'));
reader.onload = function (e) {
var a = document.createElement('a');
a.download = filename;
a.href = e.target.result;
//兼容firefox
$('body').append(a);
a.click();
$(a).remove();
}
}
};
xhr.send(param);
console.log("正在加载数据...")
$.blockUI({
message: "正在加载数据..."
});
}
</script>
</html>
完整示例代码地址：test-web-downloadtip，可以直接下载下来在本地运行。
【参考】
https://blog.csdn.net/qq_40527797/article/details/122813537 springBoot+JSP搭建项目
https://easyexcel.opensource.alibaba.com/ Easy Excel
https://blog.csdn.net/fgx_123456/article/details/79603455 web程序下载文件添加等待加载效果
https://blog.csdn.net/w139074301/article/details/121786052 前后端分离，前端获取文件流下载文件
Web流式下载数据时展示提示信息的更多相关文章
- 流式大数据计算实践（1）----Hadoop单机模式
一.前言 1.从今天开始进行流式大数据计算的实践之路,需要完成一个车辆实时热力图 2.技术选型:HBase作为数据仓库,Storm作为流式计算框架,ECharts作为热力图的展示 3.计划使用两台虚拟 ...
- 流式大数据计算实践（6）----Storm简介&使用&安装
一.前言 1.这一文开始进入Storm流式计算框架的学习 二.Storm简介 1.Storm与Hadoop的区别就是,Hadoop是一个离线执行的作业,执行完毕就结束了,而Storm是可以源源不断的接 ...
- 精讲RestTemplate第6篇-文件上传下载与大文件流式下载
本文是精讲RestTemplate第6篇,前篇的blog访问地址如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 精讲RestTemplate第2篇-多种底层H ...
- 流式大数据计算实践（5）----HBase使用&SpringBoot集成
一.前言 1.上文中我们搭建好了一套HBase集群环境,这一文我们学习一下HBase的基本操作和客户端API的使用 二.shell操作 先通过命令进入HBase的命令行操作 /work/soft/hb ...
- 流式大数据计算实践（2）----Hadoop集群和Zookeeper
一.前言 1.上一文搭建好了Hadoop单机模式,这一文继续搭建Hadoop集群 二.搭建Hadoop集群 1.根据上文的流程得到两台单机模式的机器,并保证两台单机模式正常启动,记得第二台机器core ...
- 流式大数据计算实践（7）----Hive安装
一.前言 1.这一文学习使用Hive 二.Hive介绍与安装 Hive介绍:Hive是基于Hadoop的一个数据仓库工具,可以通过HQL语句(类似SQL)来操作HDFS上面的数据,其原理就是将用户写的 ...
- 流式大数据计算实践（4）----HBase安装
一.前言 1.前面我们搭建好了高可用的Hadoop集群,本文正式开始搭建HBase 2.HBase简介 (1)Master节点负责管理数据,类似Hadoop里面的namenode,但是他只负责建表改表 ...
- 流式大数据计算实践（3）----高可用的Hadoop集群
一.前言 1.上文中我们已经搭建好了Hadoop和Zookeeper的集群,这一文来将Hadoop集群变得高可用 2.由于Hadoop集群是主从节点的模式,如果集群中的namenode主节点挂掉,那么 ...
- Java 使用流读文本数据时乱码 解决方法
一.问题描述 当我使用FileReader读取文本文件里的汉字时,读出来的是乱码.但为什么字符是正常的呢??? 二.原因探究 其根本原因在于编码标准不同.汉字采用gbk,而idea使用UTF-8.gb ...
- ASP.NET Core SignalR中的流式传输
什么是流式传输? 流式传输是这一种以稳定持续流的形式传输数据的技术. 流式传输的使用场景 有些场景中,服务器返回的数据量较大,等待时间较长,客户端不得不等待服务器返回所有数据后,再进行相应的操作.这时 ...
随机推荐
- [转帖]SQL中 join 、in 、exists 使用场景和执行效率
https://www.jianshu.com/p/c825c9bf42c2 众所周知,在sql 中,join /in /exists 都可以用来实现,"查询A表中在(或者不在)B表中的记录 ...
- [转帖]【软件测试】Jmeter性能测试（性能测试，Jmeter使用与结果分析）
文章目录 前言 一.性能测试 1. 什么是性能测试? 2. 性能测试的重要性 3. 性能指标--QPS和TPS ①QPS ②TPS 二.压测工具Jmeter 1. 什么是Jmeter? 2. Jmet ...
- [转帖]《Linux性能优化实战》笔记（一）—— 平均负载
最近在看极客时间的<Linux性能优化实战>课程,记录下学习内容. 一. 平均负载(Load Average) 1. 概念 我们都知道uptime命令的最后三列分别是过去 1 分钟.5 分 ...
- [转帖]深入理解mysql-第十章 mysql查询优化-Explain 详解（上）
目录 一.初识Explain 二.执行计划-table属性 三.执行计划-id属性 四.执行计划-select_type属性 一条查询语句在经过MySQL查询优化器的各种基于成本和规则的优化会后生成一 ...
- 【转帖】python 安装whl文件
前言 WHL文件是以Wheel格式保存的Python安装包,Wheel是Python发行版的标准内置包格式.在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的p ...
- [转帖]rsync参数详解
最近经常需要传送文件,学习到rsync这个非常好用的工具.rsync的传输方不像是scp复制粘贴,而是是创建一个镜像,所以在传输效率上比scp命令要快很多,缺点就是对文件的属性如权限.用户.组.时间戳 ...
- Ant Design Vue表单验证失败
表单验证遇见的坑 01 如果你受控数据是这样写的话 const formState= reactive({ youForm:{ youNaNe:'', useSlectValue: '001', da ...
- vim 从嫌弃到依赖(13)——motion 进阶
在最开始的时候我们介绍了一些vim中的motion 包括如何在字符间.单词间.行间以及多行间移动.·但是motion中的内容可远不止我们介绍的这些,平时用到的也远不止之间介绍的那些. 之所以没有一次介 ...
- 搭建mongo的replica set
搭建mongo的replica set 前言 安装 构建副本集 加入认证 备份数据 备份数据到本地 数据恢复 搭建mongo的replica set 前言 准备三台机器,相互可以访问的.处理思路,先构 ...
- paddleNLP-BUG和一些细节记录【一】
1.TypeError: isfile() takes 1 positional argument but 2 were given File "/root/miniconda3/envs/ ...