jsp 数据分页导出下载 显示进度条

1、思路

分页数据查询，同时缓存设置进度（为当前取出数据点总数据比例）

2、界面进度条 为 异步请求缓存比例

3、代码

css:

body{
    position:relative;
}

.mask{
    position:absolute;
    left:0px;
    top:0px;
    height:100%;
    width:100%;
    background-color: #eee;
    display:none;
    filter:alpha(opacity=50); /*IE滤镜，透明度50%*/
    -moz-opacity:0.5; /*Firefox私有，透明度50%*/
    opacity:0.9;/*其他，透明度50%*/
    z-index:999;
}
.out{
    margin:auto;
    margin-top:20%;
    text-align:center;
    height:30px;
    width:500px;
    background-color: #fff;
    border:1px solid red;
    position:relative;
}
.in{
    position:absolute;
    left:-1px;
    top:0px;
    height:28px;
    width:0px;
    background-color: red;
}
.num{
    position:absolute;
    left:0px;
    top:0px;
    height:30px;
    line-height:30px;
    width:500px;
    text-align:center;
    position:relative;
}

js:

$(function(){

          $(.donwload).click(function(){

                 var ulr = ----;

       var key = new Date().getTime();
        url+="?key="+key;

        downloadFile(url);
        process(key);

    });
});

function downloadFile(url) {
    try{
        var elemIF = document.createElement("iframe")
        elemIF.style.display = "none";
        document.body.appendChild(elemIF);
        elemIF.src = url;
    }catch(e){

    }
}

function process(key){
    $.ajax({
        type: 'GET',
        url: ----------,
        async:true,
        success:function (data) {
            if(data){
                data = parseFloat(data).toFixed(2);
                $(".in").css("width",(data/100*500)+"px");
                $(".num").text(data+"%");
                if(data >= 100){
                    setTimeout(function(){
                        $(".mask").hide();
                    }, 3000);
                }else{
                    setTimeout(function(){
                        process(key);
                    }, 1000);
                }
            }
        },
        error:function () {
            
        }
    });
}



downaction 

try{
redisTemplate.opsForValue().set("down_process_"+qm.getKey(),0.1);
int i = 0;
while(true){
    qm.getPage().setNowPage(i++);
    qm.getPage().setPageSize(100);
    Page dbpage = 取当前页数据
    List<> list = (List<>) dbpage.getResult();
    if(list != null && list.size() > 0){
        if(list.size() < 100) {
            redisTemplate.opsForValue().set("down_process_"+qm.getKey(), 100);
        }else{
            double process = i * 100.0 / dbpage.getTotalCount() * 100;
            if(process < 0.1)process=0.1d;
            redisTemplate.opsForValue().set("down_process_"+qm.getKey(), process);
        }
    }
    logger.info("-------value:" + redisTemplate.opsForValue().get("down_process_"+qm.getKey()));
    if(list == null || list.size() < 100) {
        redisTemplate.opsForValue().set("down_process_"+qm.getKey(),100);
        break;
    }
    logger.info("-------value:" + redisTemplate.opsForValue().get("down_process_"+qm.getKey()));
    continue;
}
}catch(){

}finally{
   redisTemplate.opsForValue().set("down_process_"+qm.getKey(),100);
   redisTemplate.expire("down_process_"+qm.getKey(),5, TimeUnit.MINUTES);
}

public double process(HttpServletRequest request, HttpServletResponse response,@PathVariable(value ="key") String key) throws IOException {
    Double process = 0.1d;
    try{
        int i = 0;
        while(true) {
            if(i>=2){
                process = 100d;
                break;
            }
            i++;
            if (redisTemplate.opsForValue().get("down_process_"+key) == null) {
                Thread.currentThread().sleep(1000l);
                continue;
            }else{
                process =  Double.valueOf(redisTemplate.opsForValue().get("down_process_"+key).toString());
                break;
            }
        }
    }catch (Exception e){
         process = 0.1d;
         e.printStackTrace();
    }finally {
        return process;
    }
}