论坛 › 前端开发 › easyExcel导出大数据量EXCEL文件，前端实现进度条或者遮罩层

tsx81428 发表于 2024-12-7 17:43:24

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

需求：页面点击导出，先按照页面条件去数据库查询，然后将查询到的数据导出。
题目：由于查询特别耗时，所以点击之后页面会看上去没有反应
方案1：就在点击之后在页面增长了一个进度条，等待后端查询结束之后，导出时，进度条会显示导出进度，导出结束之后进度条会消散。结果如下：
https://i-blog.csdnimg.cn/direct/6af432ed454f487987ab565d511a295f.png
方案2：点击导出时前端增长一个遮罩层，遮罩层中心显示正在下载，导出完成后遮罩层消散，好处是可以既给用户提示，还可以阻止用户再次点击导出按钮。结果如下：
https://i-blog.csdnimg.cn/direct/43b2b22c9b6445938761d6f31dd6c12c.png
留意点：后端必要在响应头中设置ContentLength，前端必要用这个更新进度
response.setContentLength(excelBytes.length); // 设置Content-Length 方案1：进度条

html代码：
<button type="button" id="export_btn" class="layui-btn btn_blue">导 出</button>
<!-- 进度条容器 -->
<div id="progressContainer" style="display:none; margin-top:20px;">
    <div id="progressBar"></div>
</div>

<!-- 显示下载进度百分比 -->
<div id="progressText" style="display:none; margin-top:5px;">下载进度: 0%</div> 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) {
                  fileName = decodeURIComponent(matches);
                }
            }
            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<Sell> 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代码：
<div id="loadingMask" class="loading-mask" style="display: none;">
    <div class="loading-content">
      <div class="spinner"></div>
      <p>正在导出中...</p>
    </div>
</div> 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) {
                        fileName = decodeURIComponent(matches);
                  }
                }
                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一致

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

查看完整版本: easyExcel导出大数据量EXCEL文件，前端实现进度条或者遮罩层