一、问题场景

  最近在做数据统计功能,需求是导出大数据量的excel,时间间隔较长,大概需要十秒左右,点击导出后,页面没有做任何处理,用户也不知道是否正在导出;如果没有做交互上的限制,用户可以一直点击导出按钮,这样势必会造成服务器瘫痪。

二、尝试过程

  花了一天尝试了两种方案:

  2.1 纯前端添加遮罩

    单纯的前端是无法监听文件是否下载完成的,主要试了两种方案:

      1.由于导出是用form表单提交的,并将form的target设置到一个隐藏iframe来达到不刷新页面而导出。本来想利用隐藏iframe的onload事件来判断是否导出成功的,但是调试发现导出成功后不会触发,所以该条路无法走通了。

      2.用ajax来做导出,但是该方法无法实现自动下载导出文件,这条路也就无法走通了。

    本来想监听浏览器点击下载链接到弹出窗口完成的状态,查阅资料发现这些都是浏览器包办了的,没有任何方法可以获取到状态,可能浏览器是出于安全考虑,所以没有提供。

  2.2 前后端联动

    主体思路是这样:

    前端点击导出按钮加载事件并添加遮罩效果,设置定时器监听ajax从后端返回是否导出完成状态,后端状态设置初始session状态值,在导出事件后改变该session值,最后通过ajax返回前端。前端接收到状态值,如果已导出完成,解除遮罩;如不是,则继续定时监听直到返回导出完成为止。

    该方案可行。

三、具体方案

前端js代码:

//点击导出事件
function startexport(){
$("#divload").show();//打开加载中遮罩
listenEnd();
} function listenEnd() {//定时监听
var loop = setInterval(function() {
if ($("#txtendflag").val() == "1") {
clearInterval(loop);//停止定时任务
$("#divload").hide();//关闭加载中遮罩
} else {
getendflag();
}
}, 1000);//单位毫秒 注意:如果导出页面很慢时,建议循环时间段稍长一点
} function getendflag() {//请求session标记位
$.ajax({
type : 'post',
url : 'ajcxtjlistaction.action?cmd=getendflag',
dataType : 'json',
success : function(data) {
$("#txtendflag").val(data.custom.flag);
},
error : function(error) {
console.log('接口不通' + error);
}
})
}

后端Java代码:

public void export() {
request.getSession().removeAttribute("endflag");//每次导入前,清除结束标记
/******导出开始******/ //@#$%#^^^&&&&&&$$%$%$%##$@^^^$
/******导出结束*******/
request.getSession().setAttribute("endflag", "1");//设置结束标记
} //获取结束标记
public Object getendflag() { Object flag = request.getSession().getAttribute("endflag"); //获取结束标记*/
JSONObject obj = new JSONObject();
obj.put("flag", flag);//返回状态值
return obj;
}

Java实现点击导出excel页面遮罩屏蔽,下载完成后解除遮罩的更多相关文章

  1. Java利用POI导入导出Excel中的数据

         首先谈一下今天发生的一件开心的事,本着一颗android的心我被分配到了PB组,身在曹营心在汉啊!好吧,今天要记录和分享的是Java利用POI导入导出Excel中的数据.下面POI包的下载地 ...

  2. Java中导入、导出Excel

    原文:Java中导入.导出Excel 一.介绍 当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已 ...

  3. 我是陌生人 Java中导入、导出Excel

    我是陌生人 Java中导入.导出Excel 一.介绍 当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是: ...

  4. java根据xml配置文件导出excel通用方法

    java web项目中时常会用到导出功能,而导出excel几乎是每个项目必备的功能之一.针对形形色色的导出方法及个人平时的工作经验,特将导出excel方法整理成通用的方法,根据xml配置来实现特定的导 ...

  5. JAVA导出excel 直接弹出下载框

    转自:https://blog.csdn.net/qq_38423105/article/details/80782283 效果展示: 1.首先准备jar包 <dependency>    ...

  6. [转]Java中导入、导出Excel

    原文地址:http://blog.csdn.net/jerehedu/article/details/45195359 一.介绍 当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样 ...

  7. Java报表工具FineReport导出EXCEL的四种API

    在实际的应用中会经常需要将数据导出成excel,导出的方式除原样导出还有分页导出.分页分sheet导出和大数据量导出.对于excel 2003版,由于限制了每个sheet的最大行数和列数,大数据量导出 ...

  8. java中使用jxl导出Excel表格详细通用步骤

    该方法一般接收两个参数,response和要导出的表格内容的list. 一般我们将数据库的数据查询出来在页面进行展示,根据用户需求,可能需要对页面数据进行导出. 此时只要将展示之前查询所得的数据放入s ...

  9. Java的导入与导出Excel

    使用Jakarta POI导入.导出Excel Jakarta POI 是一套用于访问微软格式文档的Java API.Jakarta POI有很多组件组成,其中有用于操作Excel格式文件的HSSF和 ...

随机推荐

  1. HTML5 CSS3 专题 :诱人的实例 3D旋转木马效果相册

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  2. SQL2008全部数据导出导入两种方法

    方法一:生成脚本导出导入sql2008全部数据第一步,右键要导出的数据库,任务--生成脚本 第二步,在设置脚本编写选项处,点击--高级(A),选择要编写脚本的数据的类型为:架构和数据 如果找不到 要编 ...

  3. Oracle保留小数点后两位的几种方法

    有时候在做数据处理的时候,在前台页面上显示的数字需要保留小数点的后两位,不足两位的用0代替,这个时候就需要对数据做一些处理了.如果只用round(value,2)(四舍五入)和trunc(value, ...

  4. uuid.go

    package uuid import "time" func GenerateUUID() uint64 {     return uint64(time.Now().UnixN ...

  5. Golang 的内存管理(上篇)

    Golang 的内存管理基于 tcmalloc,可以说起点挺高的.但是 Golang 在实现的时候还做了很多优化,我们下面通过源码来看一下 Golang 的内存管理实现.下面的源码分析基于 go1.8 ...

  6. Git打标签与版本控制规范

    前言 本文适用于使用Git做VCS(版本控制系统)的场景. 用过Git的程序猿,都喜欢其分布式架构带来的commit快感.不用像使用SVN这种集中式版本管理系统,每一次提交代码,都要为代码冲突捏一把冷 ...

  7. CString 转化成 const char* 类型

    写程序的时候经常会遇到无法将“CString”转换为“const char *”的错误,这里我找到了一个解决办法,与大家分享下: CString cs = _T("); ) * ; char ...

  8. bzoj3199 [Sdoi2013]escape

    这题真tm是醉了. 就是对于每个亲戚,利用其它的亲戚对他半平面交求出其控制的范围,然后随便跑个最短路就行了 n=0卡了我一下午////// #include <cstdio> #inclu ...

  9. tomcat设置直接通过域名访问项目(不需要接 /项目名)

    本文转自 : https://blog.csdn.net/qq_33647275/article/details/52585489 效果图 打开 tomcat - ->conf- ->se ...

  10. JavaWeb学习总结(转载)

    JavaWeb学习总结(五十三)--Web应用中使用JavaMail发送邮件      JavaWeb学习总结(五十二)--使用JavaMail创建邮件和发送邮件     JavaWeb学习总结(五十 ...