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中的流式传输
什么是流式传输? 流式传输是这一种以稳定持续流的形式传输数据的技术. 流式传输的使用场景 有些场景中,服务器返回的数据量较大,等待时间较长,客户端不得不等待服务器返回所有数据后,再进行相应的操作.这时 ...
随机推荐
- tiup 工具离线安装与简单导出数据说明
tiup 工具离线安装说明 mirror的创建 能上网的机器上面进行如下操作: curl --proto '=https' --tlsv1.2 -sSf https://tiup-mirrors.pi ...
- [转帖]TIDB-TIDB节点磁盘已满报警
一.背景 今日突然收到tidb节点的磁盘报警,磁盘容量已经超过了80%,但是tidb是不放数据的,磁盘怎么会满,这里就需要排查了 二.问题排查 解决步骤 1.df -h查看哪里占用磁盘比较多,然后通过 ...
- [转帖]TiFlash 简介
overview TiFlash 是 TiDB HTAP 形态的关键组件,它是 TiKV 的列存扩展,在提供了良好的隔离性的同时,也兼顾了强一致性.列存副本通过 Raft Learner 协议异步复制 ...
- [转帖]Nginx四层负载均衡详解
https://developer.aliyun.com/article/885599?spm=a2c6h.24874632.expert-profile.315.7c46cfe9h5DxWK 202 ...
- [转帖] Linux文本命令技巧(上)
Linux文本命令技巧(上) 原创:打码日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介# 前一篇我介绍了awk,这是一个全能的文本处理神器,因为它本身就是一门编程语言了 ...
- [转帖]MySQL 8.0新特性和性能数据
https://plantegg.github.io/2022/07/03/MySQL8.0%E7%9A%84%E4%B8%80%E4%BA%9B%E6%95%B0%E6%8D%AE/ MySQL 8 ...
- BMC修改密码
公司里的服务器都托管出去了, 为了好维护, 都给自己的机器设置了BMC远程管理的端口, 安全起见自己修改了密码. 方法很简单.默认用户密码是 用户:root 密码: root 用户:admin 密码: ...
- 每日一库：Memcache
Memcache 是一个高性能.分布式的内存缓存系统,常用于缓存数据库查询结果.API调用结果.页面内容等,以提升应用程序的性能和响应速度.下面详细介绍一些 Memcache 的特点和使用方式: 内存 ...
- 抢占GPU的脚本
前言 同样的,这篇博客也源自于我在做组内2030项目所产生的结果.当时,5个硕士生需要进行类似的微调工作,偶尔还会有博士生使用服务器上的GPU,但服务器上仅有8块GPU. 因此,如何快速抢占到 \(n ...
- SqlSugar Code First
注意点 1.SqlSugar Code First可以快速开发,使用起来也要分阶段使用,比如早期随便搞,中后期需要禁用一些功能保证数据安全(标题6和7 ) 2.数据库账号需要有比较高的权限, 3. ...