前端文件下载

后台需要下载数据报表的功能，开始的时候直接用

window.location.href = /文将地址

的方法去弄，对于小文件，下载的很快5秒以内就能下载完。直接给一个5秒的遮罩层，用户体验不出来，效果也很好。后面有些文件下载时间变长了，需要监控到文件下载完了好关闭遮罩层，提升体验。上面的那种方法就不行了，我想用window.open() ，方法然后用onload方法监听子页面加载完成的事件判断文件下载完成，结果尝试了很多次，还是不行。后面只能尝试其他的方法。

在网上搜到了一个Jquery库。

<script src="https://cdn.bootcss.com/jquery.fileDownload/1.4.2/jquery.fileDownload.js"></script>

在前端下载页面加上

        $.fileDownload(download_url, {
            httpMethod: 'GET',
            prepareCallback: function (url) {
                layer.closeAll();
                layer.msg('正在导出，请稍等', {time: 120000});
            },
            abortCallback: function (url) {
                layer.closeAll();
                layer.msg('下载已被取消');
            },
            successCallback: function (url) {
                layer.closeAll();
                layer.msg("文件下载成功！");           },
            failCallback: function (html, url) {
                layer.closeAll();
                layer.msg("文件下载失败，请稍后再试！");
            }
        });

后端(PHP)加上

    setcookie('fileDownload', 'true' , time() + 60, '/');

这样就可以监控到文件下载完成了。

看了一下库的源码，在下载的HTTP响应中，写入一个名为fileDownlaod值为true的cookies，当下载完成时，浏览器会将cookies写入本地。js库开始下载之后就用setTimeout 去不断的循环检测是否有这个cookies。如果有就调用成功下载的回调函数