文件下载（例如EXCEL导出）优化之防止用户多次操作

1. 问题简介
    在项目中客户提出优化一下系统的导出excel功能，由于有时候数据量比较大，服务器查询数据和生成文件的事件可能会比较长，所以促使在导出excel时页面可能会长时间没反应，用户可能会以为系统卡顿就频繁点击导出按钮。那么我们需要在此期间不让用户重复操作，当文件生成好了并且下载完成之后，才让用户可以继续操作，否则就让按钮置灰。
2. 简单分析
   正常情况这种时候首先想到的就是用ajax向服务器提交数据，并限制用户的页面操作，得到服务器返回的成功状态之后再解除操作限制就行了，但是后来发现ajax不支持流类型数据，而下载文件就是用的流，所以这里只能使用submit，而submit在这里就有个问题，我们怎么才能知道服务器什么时候已经生成好了excel，并且下载到浏览器中呢？也就是我们什么时候确定可以解除对用户的操作限制？所以这个问题就变成了得到服务器的状态反馈。
3. 实现的逻辑
    ⑴方案简介
         直接submit数据到后台，后台处理完成之后往cookie里面写值，而前台通过不停读取cookie中的值，
         如果得到了服务器写入的值，就证明后台已经处理完了，这时候就可以接触页面操作限制了。
    ⑵具体实现逻辑
         a：当我们进入导出的方法时，首先将导出按钮设置置灰属性
         b：生成一个cookieKey,这个就是cookie的name值，我这里生成的方法是
               cookieKey = 登录人ID+UUID.randomUUID.toString().replace("-","");
         c：将生成的coookieKey的值放到form表单中，然后使用formde submit()方法将数据提交到后台。
         d：数据提交到后台时，后台需要创建cookie对象，并且将cookie放到response中，让response传回前台
                注意：
                      ①创建cookie
                            Cookie cookie = new Cookie(cookieKey,cookieValue);//cookieValue值随意，随机数UUID即可。
                            cookie.setMaxAge(60*60);//时间为一天
                            cookie.setPath("项目的根路径即可");
                            //将cookie放到response中。最后这个response将这个cookie随着下载excel一起写到浏览器
                            response.addCookie(cookie);
         e：在前端js中form.submit()提交方法之后，使用方法window.setTimeout(getCookie(cookieKey),1000);
               这个方法就是，在1秒后调用一个js中的function名称为getCookie方法，参数为cookie的name。注意：
              form的submit方法是一个异步请求，所以我们间隔一秒比较好。那么在getCookie方法中我们发送一个
              ajax到后台去获取我们创建的cookie，如果excel下载完成，那么我们的前台浏览器上肯定是存在这个创
              建的cookie的，如果成功获取到就返回成功，前台就将之前置灰的按钮放开，并停止发送ajax,并且最好将
              这个创建的cookie删除，避免每一次下载都创建一个cookie。因为它的作用就是一个标识，作用完成之后
              就可以删除了。如果没有获取到，前端就使用递归方法反复发送ajax请求到后台。
              具体如下
                 ① ajax方法
                       function getCookie(cookieKey){
                           $.ajax(function(){
                                 url:"".
                                 method:"",
                                 ....,
                                 success:function(data){
                                         if(data.success){
                                              //1：放开按钮，清除置灰效果
                                             //2：清除创建的cookie
                                              var d = new Date(0).toUTCString();
                                              var expires = "expires="+d+" ;path=设置的cookie路径";
                                              document.cookie = cookieKey+"="+";"+expires;
                                               return;
                                         }  
                                        //如果没有获取到就递归调用自身
                                        window.setTimeout(getCookie(cookieKey),1000);
                                  }
                             })}

                         ②后端获取cookie的方法，其实就是前段request传递过来的
                             
              

文章目录