导出怎样增加进度条,保证进度条和导出的进行完成同步(ajax导出增加进度条)

近期在工作中遇到一个问题,导出增加进度条,可以说是一个原本非常简单的事情,但要求必须进度条消失文件下载的弹框就要出现,也就是说完全同步,试了好多种方法才发现用下面的方式才行。
干货分析
js代码`
导出的请求方法 ExportDownloadTimer 是前后端监听是否导出完成的对象

            var params = {};//参数需要往后台传递的参数信息
            $.ajax({
                type: "POST",
                url: url,//导出的触发文件路径
                data: params,//绑定参数
                success: function (response, status, request) {
                    params.DownParams = DownParams;//下载的参数在这个参数主要在后端中记录cookie信息
                    var disp = request.getResponseHeader('Content-Disposition');
                    if (disp && disp.search('attachment') != -1) {  //判断是否为文件
                        var form = $('<form method="POST" action="' + url + '">');
                        $.each(params, function (k, v) {
                            form.append($('<input type="hidden" name="' + k +
                                    '" value="' + v + '">'));
                        });
                        $('body').append(form);
                        form.submit(); //自动提交
                        ExportDownloadTimer.Count = 0;
                        ExportDownloadTimer.MaxCount = 7200;
                        ExportDownloadTimer.KeyId = DownParams.split('|')[0];
                        ExportDownloadTimer.KeyValue = DownParams.split('|')[1];
                        ExportDownloadTimer.Cache = setInterval(ExportDownloadTimer.CheckToken, 500);
                    }
                }
            });

js代码
ExportDownloadTimer方法
其中的Count和MaxCount是解决无限期的循环,可以给整个进程等待限定一个最大值

var ExportDownloadTimer = {
    Cache: null,//记录缓存方式
    Count: 0,//走到的位置 当前允许的次数
    MaxCount: 0,//最大执行次数
    KeyId: "",//监听的名称
    KeyValue: "",//监听对比值
    CheckToken: function () {
        //前端实时监测时间戳和后台设置的cookie值是否相等,相等就说明文件下载成功,就可以关闭提示框
        var token = ExportDownloadTimer.GetCookie(ExportDownloadTimer.KeyId);
        ExportDownloadTimer.Count++;
        if ((token && token == ExportDownloadTimer.KeyValue) ||
            ExportDownloadTimer.MaxCount < ExportDownloadTimer.Count) {
            clearTimeout(ExportDownloadTimer.Cache);
            ExportDownloadTimer.Cache = null,
            ExportDownloadTimer.Count = 0;
            ExportDownloadTimer.MaxCount = 0;
            ExportDownloadTimer.KeyId = "";
            ExportDownloadTimer.KeyValue = "";
         //这个地方记录进度条关闭方法
        }
    },
    //导出所用的方式处理
    GetCookie: function (cookieName) {
        var strCookie = document.cookie;
        var arrCookie = strCookie.split("; ");
        for (var i = 0; i < arrCookie.length; i++) {
            var arr = arrCookie[i].split("=");
            if (cookieName == arr[0]) {
                return arr[1];
            }
        }
        return "";
    }
}

C#代码
监听信息 DownParams 是前端传递过的参数,必须和前端信息保持一致来实现监听效果

                if (!string.IsNullOrEmpty(DownParams) && DownParams.Split('|').Length == 2 && !string.IsNullOrEmpty(DownParams.Split('|')[0]) && !string.IsNullOrEmpty(DownParams.Split('|')[1]))
                {
                    HttpRequest request = HttpContext.Current.Request;
                    HttpResponse response = HttpContext.Current.Response;

                    if (request != null && request.Cookies[DownParams.Split('|')[0]] != null)//先删除
                    {
                        response.Cookies.Remove(DownParams.Split('|')[0]);
                    }
                    Guard.IsNotNullOrEmpty(DownParams.Split('|')[0], "cookieName");
                    HttpCookie cookie = new HttpCookie(DownParams.Split('|')[0]);
                    cookie.Expires = DateTime.Now.AddMinutes(10);
                    cookie.Value = DownParams.Split('|')[1];
                    cookie.Path = "/"; //指定统一的Path,比便能通存通取    //设置跨域,这样在其它二级域名下就都可以访问到了 
                    response.AppendCookie(cookie);
                }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值