ajax异步下载服务器动态生成的Excel,前端的两种写法

一.使用window.location.href = url 此种方式后台方法只能使用get

下载按钮绑定reportExcel()函数,点击后即可获取到数据流进行下载

//导出Excel
    function reportExcel() {
        if (!confirm("最多下载5000条,确定下载吗?")) return;
        var hphm = $("#hphm").val();
        var hpzl = $("select[name=hpzl]").val();
        // hphm包含中文,使用 encodeURI(encodeURI(hphm))防止乱码,此方式需要后台二次处理
        window.location.href = '/reportExcel?hphm=' + encodeURI(encodeURI(hphm)) +'&hpzl=' + hpzl  ;
    }

二.使用原生的xhr方式下载,此方式后台方法可以用post

此方法下载完成后有回调方法,可以在下载完成前后执行方法

//导出Excel
    function reportExcel() {
        //设置定时时间
        var itime = 0;
        //excelExport为下载按钮的id,点击下载按钮后使按钮在下载完成前不可点击
        $("#excelExport").attr("disabled", "disabled");
        //获取到传参的值
 		var hphm = $("#hphm").val();
        var hpzl = $("select[name=hpzl]").val();

		//新建一个原生xhr异步请求
        var xhr = new XMLHttpRequest();
        xhr.open('post', '/exportExcel', true);
        xhr.responseType = 'blob';
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
        //发送请求,准备下载
        xhr.send('hphm='+hphm+'&hpzl='+hpzl);
        //设置定时器,每秒执行一次,显示下载耗时,并显示在按钮中
        var downloadTimer = setInterval( function() {
            itime++;
            var time = itime + "";
            $("#excelExport").attr("value","用时:"+time+"秒");
        }, 1000);
        //下载完成后,生成文件,清除定时器
        xhr.onload = function () {
            if (this.status == 200) {
                var blob = this.response;
                var a = document.createElement('a');
                var url = window.URL.createObjectURL(blob);
                a.href = url;
                //设置文件名称
                a.download = '导出数据.xls';
                a.click();

                //清除定时器,button按钮文字回复,可点击
                clearTimeout(downloadTimer);
                $("#excelExport").attr("value","导出Execl");
                $("#excelExport").removeAttr("disabled");

            }
        }
        

    }