EASYUI导出报表进度条等到返回结果完在消失

背景:每次我们导出excel的时候 ,如果数据量很大,导出花费的时间会很长,页面却有没任何反应,这个时候用户会认为系统有问题,要么关了页面;要么狂点导出,导致系统卡死。
我使用XMLHttpRequest来进行导出下载

/**
 2      * 导出文件方法
 3      * @param {url} 导出方法路径
 4      * @param {data} 传输参数(Json类型)
 5      * @param {loadSuccess} 调用成功回调方法
 6      * @param {timeout} 请求过期时间(毫秒级  1000毫秒=1秒)
 7      **/
 function ExportFile(url, data, loadSuccess, timeout) {
			$.messager.progress({
				msg:'正在导出处理,请耐心等待...'
			});//loading效果
	         var xmlResquest = new XMLHttpRequest();
	         xmlResquest.open("POST", url, true);
	         xmlResquest.setRequestHeader("Content-type", "application/json");
	         xmlResquest.timeout = timeout || (1000 * 60);// 超时时间,单位是毫秒
	         xmlResquest.responseType = "blob";//该属性必须设置
	         xmlResquest.onload = function (oEvent) {
	         	     $.messager.progress('close');//关闭loading效果
		             var retData = { Success: true, errorMsg: ["导出成功!"] };
		             var content = xmlResquest.response;
		             var blob = new Blob([content]);
		             if (xmlResquest.getResponseHeader("content-disposition")) {//判断有没有请求头content-disposition,该请求头在后台文件流导出成功时添加
			                 var explorer = navigator.userAgent;
			                 var elink = document.createElement('a');
			                 var fileName = xmlResquest.getResponseHeader("content-disposition").split(";")[1].split("=")[1];//获取文件名
			                //响应头中的内容如果包含中文会出现乱码,需要解码才能正常显示
			                 if (explorer.indexOf("MSIE") >= 0 || explorer.indexOf("Chrome") >= 0) {  //IE和google浏览器
				                     fileName = decodeURIComponent(fileName);
				                 } else {
				                     fileName = decodeURI(escape(fileName));
				                 }
			                 elink.download = fileName;
			                 elink.style.display = 'none';
			                 elink.href = window.URL.createObjectURL(blob);
			                 document.body.appendChild(elink);
			                 elink.click();
			                 document.body.removeChild(elink);
			                 window.URL.revokeObjectURL(url);
			                 if (loadSuccess && $.isFunction(loadSuccess)) loadSuccess(retData, oEvent);
			             } else {//后台出现异常时的处理
			                var r = new FileReader();
			                 r.readAsText(blob, 'utf-8');
			                 r.onload = function (e) {
				                     if (loadSuccess && $.isFunction(loadSuccess)) loadSuccess(JSON.parse(r.result), oEvent);
				                 }
			             }
		         };
	         xmlResquest.ontimeout = function (e) {
				 	$.messager.progress('close');
		             $.messager.error("导出超时,请重新导出!");
		         };
	         xmlResquest.onerror = function (e) {
	         	     $.messager.progress('close');
		             $.messager.error("导出时出现错误,导出失败,请联系相关技术人员!");
		         };
	         xmlResquest.send(JSON.stringify(data));//发送请求
 }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值