easyExcel导出大数据量EXCEL文件,前端实现进度条或者遮罩层

devtools/2024/12/27 22:06:05/

需求:页面点击导出,先按照页面条件去数据库查询,然后将查询到的数据导出。

问题:由于查询特别耗时,所以点击之后页面会看上去没有反应

方案1:就在点击之后在页面增加了一个进度条,等待后端查询结束之后,导出时,进度条会显示导出进度,导出结束之后进度条会消失。效果如下:

方案2:点击导出时前端增加一个遮罩层,遮罩层中间显示正在下载,导出完成后遮罩层消失,好处是可以既给用户提示,还可以阻止用户再次点击导出按钮。效果如下:

注意点:后端需要在响应头中设置ContentLength,前端需要用这个更新进度

response.setContentLength(excelBytes.length); // 设置Content-Length

方案1:进度条

html代码:

导 出

下载进度: 0%

css:

#progressContainer {
width: 100%;
background-color: #f3f3f3;
border: 1px solid #ccc;
border-radius: 5px;
}
#progressBar {
width: 0%;
height: 20px;
background-color: #4caf50;
border-radius: 5px;
}

js代码:

//进度条
$(‘#export_btn’).on(‘click’, function () {
// 获取表单数据并构建FormData对象
var formData = $(‘#searchForm’).serializeArray();
var form = new FormData();

$.each(formData, function () {
form.append(this.name, this.value);
});

// 添加额外的参数
form.append(‘publishFrom’, ‘${RequestParameters.type}’);

// 创建XHR对象
var xhr = new XMLHttpRequest();
xhr.open('POST', '路径/exportData', true);
xhr.responseType = 'blob'; // 设置响应类型为blob// 显示进度条
$('#progressContainer').show();
$('#progressText').show();
$('#progressBar').css('width', '0%');
$('#progressText').text('下载进度: 0%');// 设置请求头以模拟表单提交
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');// 监听下载进度
xhr.onprogress = function (event) {if (event.lengthComputable) {var percentComplete = Math.round((event.loaded / event.total) \* 100);console.log('Loaded:', event.loaded, 'Total:', event.total);$('#progressBar').css('width', percentComplete + '%');$('#progressText').text('下载进度: ' + percentComplete + '%');} else {console.log('无法计算进度');}
};// 下载完成后处理
xhr.onload = function () {if (xhr.status === 200) {// 隐藏进度条$('#progressContainer').hide();$('#progressText').hide();// 创建下载链接并触发下载var blob = xhr.response;var downloadUrl = URL.createObjectURL(blob);var a = document.createElement('a');a.href = downloadUrl;// 从响应头中获取文件名var disposition = xhr.getResponseHeader('Content-Disposition');var fileName = '下载文件.xlsx';if (disposition && disposition.indexOf('filename\*=utf-8''') !== -1) {var filenameRegex = /filename\*=utf-8''(.+)/;var matches = filenameRegex.exec(disposition);if (matches != null && matches\[1\]) {fileName = decodeURIComponent(matches\[1\]);}}a.download = fileName;document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(downloadUrl);} else {alert('下载失败,请重试。');$('#progressContainer').hide();$('#progressText').hide();}
};// 发送请求
xhr.send(form);

});

后端代码,使用easyExcel导出

//数据查询
List sellList = this.search();

// 将Excel写入ByteArrayOutputStream
try (ByteArrayOutputStream baos = new ByteArrayOutputStream()) {
// 使用EasyExcel将数据写入ByteArrayOutputStream
EasyExcel.write(baos, Sell.class)
.sheet(“列表”)
.doWrite(sellList);

// 获取Excel字节数组
byte\[\] excelBytes = baos.toByteArray();// 设置响应头
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
response.setCharacterEncoding("utf-8");
String fileName = URLEncoder.encode("列表导出\_Sell", "UTF-8").replaceAll("\\+", "%20");
response.setHeader("Content-Disposition", "attachment;filename\*=utf-8''" + fileName + ".xlsx");
response.setHeader("Cache-Control", "max-age=0");
response.setContentLength(excelBytes.length); // 设置Content-Length// 将Excel字节数组写入响应
try (OutputStream out = response.getOutputStream()) {out.write(excelBytes);out.flush();
}

} catch (IOException e) {
e.printStackTrace();
}

方案2:遮罩层

html代码:

正在导出中...

css:

.loading-mask {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}

.loading-content {
text-align: center;
color: #fff;
}

.spinner {
border: 8px solid rgba(255, 255, 255, 0.3);
border-top: 8px solid #fff;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

button:disabled {
opacity: 0.6;
cursor: not-allowed;
}

js代码(阻止了有遮罩层时用户仍然可以通过键盘或其他方式触发多次点击):

$(document).ready(function () { // 确保DOM加载完成后执行
$(‘#export_btn’).on(‘click’, function (e) {
e.preventDefault(); // 阻止默认表单提交行为

    var $exportBtn = $(this);// 禁用导出按钮,防止重复点击$exportBtn.prop('disabled', true);// 显示遮罩层$('#loadingMask').show();// 获取表单数据并构建FormData对象var formData = $('#searchForm').serializeArray();var form = new FormData();$.each(formData, function () {form.append(this.name, this.value);});// 添加额外的参数form.append('publishFrom', '${RequestParameters.type}');// 创建XHR对象var xhr = new XMLHttpRequest();xhr.open('POST', '路径/exportData', true);xhr.responseType = 'blob'; // 设置响应类型为blob// 监听下载完成后处理xhr.onload = function () {$('#loadingMask').hide(); // 隐藏遮罩层$exportBtn.prop('disabled', false); // 启用导出按钮if (xhr.status === 200) {// 创建下载链接并触发下载var blob = xhr.response;var downloadUrl = URL.createObjectURL(blob);var a = document.createElement('a');a.href = downloadUrl;// 从响应头中获取文件名var disposition = xhr.getResponseHeader('Content-Disposition');var fileName = '下载文件.xlsx';if (disposition && disposition.indexOf("filename\*=utf-8''") !== -1) { // 修改:修正单引号字符var filenameRegex = /filename\*=utf-8''(.+)/;var matches = filenameRegex.exec(disposition);if (matches != null && matches\[1\]) {fileName = decodeURIComponent(matches\[1\]);}}a.download = fileName;document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(downloadUrl);} else {alert('下载失败,请重试。');}};// 监听网络错误xhr.onerror = function () {$('#loadingMask').hide(); // 隐藏遮罩层$exportBtn.prop('disabled', false); // 启用导出按钮alert('网络错误,请检查您的连接。');};xhr.send(form); 
});

});

后端代码和方案1一致


http://www.ppmy.cn/devtools/145935.html

相关文章

Effective C++ 条款 15:在资源管理类中提供对原始资源的访问

文章目录 条款 15:在资源管理类中提供对原始资源的访问核心思想原始资源的访问方式标准库中的实现示例设计建议总结 条款 15:在资源管理类中提供对原始资源的访问 核心思想 为什么需要访问原始资源? 在使用 RAII(Resource Acquis…

C++创建型模式之原型模式

C 原型模式(Prototype Pattern) 1. 解决的问题 原型模式(Prototype Pattern)是一种创建型设计模式,用于解决对象创建的问题,特别是在需要创建多个相似对象时,避免使用重复的构造代码。原型模式…

Opencv之对图片的处理和运算

Opencv实现对图片的处理和修改 目录 Opencv实现对图片的处理和修改灰度图读取灰度图转换灰度图 RBG图单通道图方法一方法二 单通道图显色合并单通道图 图片截取图片打码图片组合缩放格式1格式2 图像运算图像ma[m:n,x:y]b[m1:n1,x1:y1] add加权运算 灰度图 读取灰度图 imread(‘…

一些鸿蒙开发的更新问题及解决方法

一.遇到的问题 十月份那会模拟器还是好使的,两个月没有动,突然报错如下: 二.解决措施 1.请先确认CPU型号是否支持虚拟化技术,如果CPU支持虚拟化 打开控制面板 > 程序 > 程序与功能 > 启动或关闭Windows功能 2.找到并…

漏洞扫描:网络安全的 “体检” 与 “防护指南”

在当今数字化时代,网络安全如同守护城堡的坚固城墙,而漏洞扫描则是检查城墙是否存在缝隙与薄弱环节的重要手段。那么,究竟什么是漏洞扫描?又该如何进行呢? 什么是漏洞扫描? 漏洞扫描是一种安全检测过程&a…

gesp(二级)(12)洛谷:B3955:[GESP202403 二级] 小杨的日字矩阵

gesp(二级)(12)洛谷:B3955:[GESP202403 二级] 小杨的日字矩阵 题目描述 小杨想要构造一个 N N N\times N NN 的日字矩阵( N N N 为奇数),具体来说,这个矩阵共有 N N N 行&#x…

美畅物联丨如何通过视频汇聚平台汇聚视频并推送至上级28181平台

在当今的信息化时代,视频监控系统在公共安全、城市管理、企业监管等众多领域得到了广泛应用。为了高效地管理和利用视频数据,将视频信息经由视频汇聚平台汇聚起来,再推送到上级国标平台(例如GB/T 28181平台)就成了一种…

JS 异步 ( 一、异步概念、Web worker 基本使用 )

文章目录 异步代码异步执行概念ES6 之前的异步 Web worker 异步 代码异步执行概念 通常代码是自上而下同步执行的,既后面的代码必须等待前面的代码执行完才会执行,而异步执行则是将主线程中的某段代码交由子线程去执行,当交给子线程后&…