前端文件下载

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

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。如果有就调用成功下载的回调函数

发表评论

电子邮件地址不会被公开。 必填项已用*标注