数据导出js监听

由于导出数据时间太长用户的体验和用户的耐心全部消耗殆尽。于是领导说让我配合前端弄出个loading。ps:说好的特效那。
由于导出直接访问的是url 于是我想到了ajax 异步请求。于是我开始尝试用异步请求做了我的第一次尝试。跟随者度娘的协助我明白了这种方式的伪原理。先请求数据将数据转成base64 放入页面中一个隐藏的a标签的href中。然后用js 触发a的点击。可是数据太大会直接下载失败。
之后经过查找资料后了解用iframe 标签来做下载。在下载的事件触发让iframe加载下载的页面。但是问题又来了 下载的页面生成文件后就会消失。用加载完成事件显然不能够成功的监听下载过程。
于是乎我陷入了一个难题。该如何成功监听下载那。
后来在查找资料中得到了一个思路。cookie
让后台完成时候生成一个标识cookie
而前面从事件触发开始做个定时任务。没过一秒执行一次查询cookie 如果存在。关掉循环。这样我们就成功的监听了。
剩下的上马

html 中加载

<iframe id="ifile" style="display:none"></iframe>

js

/**
 * 定时任务 常量
 */
var downloadfileInterval;
/**
 * 任务锁。 防止重复点击
 * @type {boolean}
 */
var downloadfileIntervalBoolen = true;

/**
 * 数据导出
 */
function downloadfile(type) {
    //判断是否开启任务锁定
    if (downloadfileIntervalBoolen) {
        //开启 loading
        $("#loading_pic").css("display","block");
        //锁住 任务
        downloadfileIntervalBoolen=false;
        //在iframe 中下载
        $("#ifile").attr("src", "/pc/" + type + "/excelExport");
        // 开启执行定时任务
        downloadfileInterval = window.setInterval(getDownloadState, 1000);
    }else{
        $.gritter.add({
            title: '',
            text: '文件正在下载中。',
            class_name: 'gritter-error'
        });
    }
}


function getDownloadState() {

    var downloadState = $.cookie("downloadState");
    // 判断是否存在 downloadState的值
    if (downloadState && downloadState != "null") {
        if (downloadState == "success") {
            $.gritter.add({
                title: '成功',
                text: '下载成功。',
                class_name: 'gritter-success'
            });

        } else if (downloadState == "notDownload") {
            $.gritter.add({
                title: '',
                text: '下载任务正在执行中请保持淡定等候。',
                class_name: 'gritter-error'
            });
        } else if (downloadState == "error") {
            $.gritter.add({
                title: '',
                text: '下载异常请稍后重试。',
                class_name: 'gritter-error'
            });
        }
        //关闭任务锁
        downloadfileIntervalBoolen=true;
        //关闭 loading
        $("#loading_pic").css("display","none");
        //关闭定时任务
        window.clearInterval(downloadfileInterval);
    }
}
$(function(){
	//监听是否刷新或者关闭页面
    window.onbeforeunload = function (e) {
    //用任务锁的状态 判断一下任务是否存在
        if (!downloadfileIntervalBoolen) {
        //存在任务锁死 询问是否要关闭页面
            var e = window.event || e;
            e.returnValue = ("导出文件正在下载中，关闭页面将会取消下载。是否要取消下载？");
        }
    }
})