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

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

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

方案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一致

相关推荐
轻口味1 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王1 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发2 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀2 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
菠萝蚊鸭2 小时前
Dhatim FastExcel 读写 Excel 文件
java·excel·fastexcel
一只小灿灿2 小时前
VB.NET在 Excel 二次开发中的全面应用
.net·excel
旭东怪2 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef4 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6414 小时前
【CSS】实现tag选中对钩样式
前端·css·css3