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()即可