一、背景
业务需求:做文档的批量下载功能,排查代码后发现后端已支持该功能。啪啪啪三下做了个按钮,调了一下后端逻辑,下载文档较大的时候,后端下载和压缩期间,页面啥提示都没有。因此想在这期间做一个提示,并把下载按钮禁用掉。
二、调研
由于本人小白,所以查了很多资料,许多博客提到用iframe,总结一下这些方案:
1、前后端配合的方式,后端将文件下载进度放在cookie中,通过轮询cookie的方式,对文件下载进度进行获取,判断文件是否已经下载完毕。 缺陷:需要后端配合 ,且如果客户端禁用了cookie、无痕浏览,则该方案完全失效。
2、添加header配置,也有缺陷
3、定时器轮询监听readyState方式,很多博客都建议使用该方法,但我尝试之后,我本地的readyState状态一直是4,找了很久没找到原因。由于任务急,就放弃了iframe的实现方案。以下是该方法的实现代码,供诸君参考。
// 使用定时器轮询iframe的readyState,判断下载是否完成(弹出下载框或者开始下载)
var timer = setInterval(function () {
var iframeDoc = excelIFrame.contentDocument || excelIFrame.contentWindow.document;
// Check if loading is complete
if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == 'interactive') {
// do something
clearInterval(timer);
return;
}
}, 500);
三、最终实现
最后尝试用XMLHttpRequest,在没改后端逻辑的情况下,解决了需求,感谢网友的分享:
var xhh = new XMLHttpRequest();
page_url = url;
xhh.open("post", page_url);
xhh.responseType = 'blob';
xhh.onreadystatechange = function () {
if (xhh.readyState === 4 && xhh.status === 200) {
//do something
var name = xhh.getResponseHeader("Content-disposition");
var filename = name.substring(21,name.length);
var csvUrl = URL.createObjectURL(this.response);
var link = document.createElement('a');
link.href = csvUrl;
link.download = filename;
link.click();
}
};
xhh.send();