java导出excel添加进度条，前端基于vue

java后台在导出数据的时候在session中存入进度值，前端在写一个定时任务来请求session中的值

java代码如下：

excel获取数据的方法中分步骤写入如下代码
request.getSession().setAttribute("percent",10);//这里是10%
request.getSession().setAttribute("percent",50);//这里是50%
request.getSession().setAttribute("percent",100);//这里是100%
 
 /**
     * 进度条刷新，数据从session当中取
     */
    @ResponseBody
    @RequestMapping(value = "/flushProgress")
    public BaseResponse<Object> flushProgress3(HttpServletRequest request) throws Exception
    {
        BaseResponse<Object> result = new BaseResponse<Object>();
        Map<String,Object> map = new HashMap<>();
        try {
            map.put("percent", request.getSession().getAttribute("percent"));          //百分比数字
            result.setMsg("成功");
            result.setData(map);
            result.setCode(200);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }

前端html代码：

<!-- 导出进度条 开始-->
      <el-dialog class="dialog-panel pop-sm" title="下载进度" :visible.sync="exportDataProgress">
        <div style="text-align: center;">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="percentage"></el-progress>
        </div>
      </el-dialog>

js代码：

访问后台session值方法
function flushProgress(){
    $.ajax({
        type: "POST",
        url: contextRoot+"dataQuery/flushProgress",
        async: true,
        success: function (result) {
            if (result.code == 200) {
                app.percentage = result.data.percent;
                if(app.percentage === 100){
                    setTimeout(function () {
                        app.exportDataProgress = false;//进度条关闭
                    }, 500)
                }
            }else {
                alert(result.msg);
            }
        },
        error: function (data) {
        }
    });
}
 
 
js轮询获取session值
//监听进度条
function listenEnd() {//定时监听
    var loop = setInterval(function () {
        if (app.percentage === 100) {
            clearInterval(loop);//停止定时任务
        } else {
            app.flushProgress();
        }
    }, 1000);//单位毫秒  注意：如果导出页面很慢时，建议循环时间段稍长一点
}

然后在下载excel访问方法之后调用listenEnd()即可