java导出excel添加进度条,前端基于vue
java后台在导出数据的时候在session中存入进度值,前端在写一个定时任务来请求session中的值java代码如下:excel获取数据的方法中分步骤写入如下代码request.getSession().setAttribute("percent",10);//这里是10%request.getSession().setAttribute("percent",50);//这里是5...
·
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()即可
参考链接:https://blog.csdn.net/weixin_42324471/article/details/81744378
更多推荐
已为社区贡献7条内容
所有评论(0)