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

需求：页面点击导出，先按照页面条件去数据库查询，然后将查询到的数据导出。
题目：由于查询特别耗时，所以点击之后页面会看上去没有反应
方案1：就在点击之后在页面增长了一个进度条，等待后端查询结束之后，导出时，进度条会显示导出进度，导出结束之后进度条会消散。结果如下：

方案2：点击导出时前端增长一个遮罩层，遮罩层中心显示正在下载，导出完成后遮罩层消散，好处是可以既给用户提示，还可以阻止用户再次点击导出按钮。结果如下：

留意点：后端必要在响应头中设置ContentLength，前端必要用这个更新进度

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

复制代码

方案1：进度条

html代码：

1. <button type="button" id="export_btn" class="layui-btn btn_blue">导 出</button>

复制代码

1. <!-- 进度条容器 -->
2. <div id="progressContainer" style="display:none; margin-top:20px;">
3.     <div id="progressBar"></div>
4. </div>
6. <!-- 显示下载进度百分比 -->
7. <div id="progressText" style="display:none; margin-top:5px;">下载进度: 0%</div>

复制代码

css:

1. #progressContainer {
2.     width: 100%;
3.     background-color: #f3f3f3;
4.     border: 1px solid #ccc;
5.     border-radius: 5px;
6. }
7. #progressBar {
8.     width: 0%;
9.     height: 20px;
10.     background-color: #4caf50;
11.     border-radius: 5px;
12. }

复制代码

js代码：

1. //进度条
2. $('#export_btn').on('click', function () {
3.    // 获取表单数据并构建FormData对象
4.    var formData = $('#searchForm').serializeArray();
5.    var form = new FormData();
7.    $.each(formData, function () {
8.        form.append(this.name, this.value);
9.    });
11.    // 添加额外的参数
12.    form.append('publishFrom', '${RequestParameters.type}');
14.     // 创建XHR对象
15.     var xhr = new XMLHttpRequest();
16.     xhr.open('POST', '路径/exportData', true);
17.     xhr.responseType = 'blob'; // 设置响应类型为blob
19.     // 显示进度条
20.     $('#progressContainer').show();
21.     $('#progressText').show();
22.     $('#progressBar').css('width', '0%');
23.     $('#progressText').text('下载进度: 0%');
25.     // 设置请求头以模拟表单提交
26.     // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
28.     // 监听下载进度
29.     xhr.onprogress = function (event) {
30.         if (event.lengthComputable) {
31.             var percentComplete = Math.round((event.loaded / event.total) * 100);
32.             console.log('Loaded:', event.loaded, 'Total:', event.total);
33.             $('#progressBar').css('width', percentComplete + '%');
34.             $('#progressText').text('下载进度: ' + percentComplete + '%');
35.         } else {
36.             console.log('无法计算进度');
37.         }
38.     };
40.     // 下载完成后处理
41.     xhr.onload = function () {
42.         if (xhr.status === 200) {
43.             // 隐藏进度条
44.             $('#progressContainer').hide();
45.             $('#progressText').hide();
47.             // 创建下载链接并触发下载
48.             var blob = xhr.response;
49.             var downloadUrl = URL.createObjectURL(blob);
50.             var a = document.createElement('a');
51.             a.href = downloadUrl;
52.             // 从响应头中获取文件名
53.             var disposition = xhr.getResponseHeader('Content-Disposition');
54.             var fileName = '下载文件.xlsx';
55.             if (disposition && disposition.indexOf('filename*=utf-8\'\'') !== -1) {
56.                 var filenameRegex = /filename\*=utf-8''(.+)/;
57.                 var matches = filenameRegex.exec(disposition);
58.                 if (matches != null && matches[1]) {
59.                     fileName = decodeURIComponent(matches[1]);
60.                 }
61.             }
62.             a.download = fileName;
63.             document.body.appendChild(a);
64.             a.click();
65.             document.body.removeChild(a);
66.             URL.revokeObjectURL(downloadUrl);
67.         } else {
68.             alert('下载失败，请重试。');
69.             $('#progressContainer').hide();
70.             $('#progressText').hide();
71.         }
72.     };
74.     // 发送请求
75.     xhr.send(form);
76. });

复制代码

后端代码,利用easyExcel导出

1. //数据查询
2. List<Sell> sellList = this.search();
4. // 将Excel写入ByteArrayOutputStream
5. try (ByteArrayOutputStream baos = new ByteArrayOutputStream()) {
6.     // 使用EasyExcel将数据写入ByteArrayOutputStream
7.     EasyExcel.write(baos, Sell.class)
8.             .sheet("列表")
9.             .doWrite(sellList);
11.     // 获取Excel字节数组
12.     byte[] excelBytes = baos.toByteArray();
14.     // 设置响应头
15.     response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
16.     response.setCharacterEncoding("utf-8");
17.     String fileName = URLEncoder.encode("列表导出_Sell", "UTF-8").replaceAll("\\+", "%20");
18.     response.setHeader("Content-Disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");
19.     response.setHeader("Cache-Control", "max-age=0");
20.     response.setContentLength(excelBytes.length); // 设置Content-Length
22.     // 将Excel字节数组写入响应
23.     try (OutputStream out = response.getOutputStream()) {
24.         out.write(excelBytes);
25.         out.flush();
26.     }
28. } catch (IOException e) {
29.     e.printStackTrace();
30. }

复制代码

方案2：遮罩层

html代码：

1. <div id="loadingMask" class="loading-mask" style="display: none;">
2.     <div class="loading-content">
3.         <div class="spinner"></div>
4.         <p>正在导出中...</p>
5.     </div>
6. </div>

复制代码

css：

1. .loading-mask {
2.     display: none;
3.     position: fixed;
4.     top: 0;
5.     left: 0;
6.     width: 100%;
7.     height: 100%;
8.     background-color: rgba(0, 0, 0, 0.5);
9.     z-index: 9999;
10.     display: flex;
11.     justify-content: center;
12.     align-items: center;
13. }
15. .loading-content {
16.     text-align: center;
17.     color: #fff;
18. }
20. .spinner {
21.     border: 8px solid rgba(255, 255, 255, 0.3);
22.     border-top: 8px solid #fff;
23.     border-radius: 50%;
24.     width: 60px;
25.     height: 60px;
26.     animation: spin 1s linear infinite;
27.     margin: 0 auto 20px;
28. }
30. @keyframes spin {
31.     0% { transform: rotate(0deg); }
32.     100% { transform: rotate(360deg); }
33. }
35. button:disabled {
36.     opacity: 0.6;
37.     cursor: not-allowed;
38. }

复制代码

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

1. $(document).ready(function () { // 确保DOM加载完成后执行
2.     $('#export_btn').on('click', function (e) {
3.         e.preventDefault(); // 阻止默认表单提交行为
5.         var $exportBtn = $(this);
7.         // 禁用导出按钮，防止重复点击
8.         $exportBtn.prop('disabled', true);
10.         // 显示遮罩层
11.         $('#loadingMask').show();
13.         // 获取表单数据并构建FormData对象
14.         var formData = $('#searchForm').serializeArray();
15.         var form = new FormData();
17.         $.each(formData, function () {
18.             form.append(this.name, this.value);
19.         });
21.         // 添加额外的参数
22.         form.append('publishFrom', '${RequestParameters.type}');
24.         // 创建XHR对象
25.         var xhr = new XMLHttpRequest();
26.         xhr.open('POST', '路径/exportData', true);
27.         xhr.responseType = 'blob'; // 设置响应类型为blob
29.         // 监听下载完成后处理
30.         xhr.onload = function () {
31.             $('#loadingMask').hide(); // 隐藏遮罩层
32.             $exportBtn.prop('disabled', false); // 启用导出按钮
34.             if (xhr.status === 200) {
35.                 // 创建下载链接并触发下载
36.                 var blob = xhr.response;
37.                 var downloadUrl = URL.createObjectURL(blob);
38.                 var a = document.createElement('a');
39.                 a.href = downloadUrl;
41.                 // 从响应头中获取文件名
42.                 var disposition = xhr.getResponseHeader('Content-Disposition');
43.                 var fileName = '下载文件.xlsx';
44.                 if (disposition && disposition.indexOf("filename*=utf-8''") !== -1) { // 修改：修正单引号字符
45.                     var filenameRegex = /filename\*=utf-8''(.+)/;
46.                     var matches = filenameRegex.exec(disposition);
47.                     if (matches != null && matches[1]) {
48.                         fileName = decodeURIComponent(matches[1]);
49.                     }
50.                 }
51.                 a.download = fileName;
52.                 document.body.appendChild(a);
53.                 a.click();
54.                 document.body.removeChild(a);
55.                 URL.revokeObjectURL(downloadUrl);
56.             } else {
57.                 alert('下载失败，请重试。');
58.             }
59.         };
61.         // 监听网络错误
62.         xhr.onerror = function () {
63.             $('#loadingMask').hide(); // 隐藏遮罩层
64.             $exportBtn.prop('disabled', false); // 启用导出按钮
65.             alert('网络错误，请检查您的连接。');
66.         };
68.         xhr.send(form);
69.     });
70. });

复制代码

后端代码和方案1一致

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。