JS中配合layer弹窗实现数字进度

最新推荐文章于 2025-01-18 09:25:56 发布

转载最新推荐文章于 2025-01-18 09:25:56 发布 · 1.2k 阅读

杂项专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在导出大量数据（10万-50万条记录）到Excel时，通过批量查询和更新进度的方式，实现实时显示导出进度的技术方案。利用后端分批处理数据并计算进度，前端通过定时请求获取进度信息，并以进度条形式展示，有效提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考链接

https://blog.youkuaiyun.com/GitLuckyd/article/details/80579267

https://www.layui.com/doc/modules/layer.html

主要情景就是用在了导出excel上

然后数据太大，10万-50万的那种，总不能干等着吧

就参考撸了个数字的进度条。

写了个方法

就是批量查询，然后塞到excel。

如此反复，计算下百分比进度，扔到session里

然后请求去拿session里的值，显示出来“进度55.23%”这种，一段一段的跳，差不多时就关掉

就这样取巧解决了。

因为不是前端的就这样搞了。

    function progress() {
		var layer_index = layer.open({
			type: 0,
			title: false,
			closeBtn: 0,
			btn: false,
			content: '<div class="executeprogress">正在执行，请耐心等待... ...</div>',
			success: function(layero, index){

			}
		});

		var i = 0;
		// var n = 10;
		var index = setInterval(function () {
			if (i >= 100) {
				$('.executeprogress').html('执行完成，即将下载excel');
				setTimeout(function () {
					clearInterval(index);
					layer.close(layer_index);
				}, 1000);
			} else {
				$.ajax({
					async: false,
					type: "POST",
					data: {},
					url: url,
					dataType: 'json',
					success: function(data) {
						if (data.success) {
							i = data.obj;
							if (i >= 100) i = 100;
							$('.executeprogress').html('正在执行，目前进度：' + (i) + '%');
						}
					}
				});
				// $('.executeprogress').html('正在执行第' + (i) + '/' + n + '条');
				// i++;
			}
		}, 1000);
	}