最近在做的一个项目碰到一个问题,就是需要检测什么时候导出成功并根据导出成功进行提示操作。开始是直接使用location.href,但是无法检测到是否下载成功。
经过查找资料下载文件使用iframe可以做到,但是onload可以检测到页面加载 成功,无法检测到下载加载成功。经过搜索资料发现一个解决,方案。原理如下:
在点击下载按钮时获得一个时间戳并把时间戳发送给后台,后台响应成功后把发送的时间戳设置为cookie值,前端实时监测cookie值和前端的时间戳是否相等,相等就说明文件下载成功。
function exportExcelForm(obj){ var timer,flag=0; var _self=obj._self; var downloadToken=obj.time, url=obj.url, triggerDelay = 1000; _self.classList.add('disabled'); _self.innerHTML='导出中...'; timer=setTimeout(function() { function checkToken(){ var timerll=setInterval(function(){ var sertoken=getCookie(obj.key); if(sertoken&&(sertoken==downloadToken)){ clearTimeout( downloadTimer ); clearInterval( timerll ); frame.remove(); _self.classList.remove('disabled'); _self.innerHTML=obj.text; clearCookie(obj.key); flag=0; }else if(sertoken){ alert(obj.text+'失败'); clearTimeout( downloadTimer ); clearInterval( timerll ); clearCookie(obj.key); _self.classList.remove('disabled'); _self.innerHTML=obj.text; } },100); } if(!flag){ flag=1; var frame=$('<iframe />').attr('src', url).attr('id','iframe_download_report').hide().appendTo('body'); var downloadTimer=setTimeout(checkToken,1000); } }, triggerDelay); }
$('#exportNewStock').on('click',function(){ var _self=this; var downloadToken=+new Date(); var url =maochao+'stock/exportFinalStockExcelAllotNew.xlsx?brandname='+brandName+'&statisticsdate='+time+'&stockoutDay='+ditchCode+'&value='+downloadToken; var obj={ _self:_self, time:downloadToken, url:url, text:'导出新仓调拨模板', key:'excel_new' } exportExcelForm(obj); });