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"); } } }