监听文档是否已做好下载准备

一、背景

业务需求：做文档的批量下载功能，排查代码后发现后端已支持该功能。啪啪啪三下做了个按钮，调了一下后端逻辑，下载文档较大的时候，后端下载和压缩期间，页面啥提示都没有。因此想在这期间做一个提示，并把下载按钮禁用掉。

二、调研

由于本人小白，所以查了很多资料，许多博客提到用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();