在項目中碰到需要導出報表（并且是帶參數的）
然后就想著通過文件流的形式下載

1.模擬表單提交的形式

var $form = $("<form id='exportForm' method='post' ></form>");$form.attr({'action':action,'method':'post'});$form.append($("<input type='hidden' name='columns' value='"+JSON.stringify(columns)+"' />"));$form.append($("<input type='hidden' name='fields' value='"+JSON.stringify(fields)+"'/>"));$form.appendTo("body");$form.css('display','none');$form.submit();

但是這種表單提交的方式有點難受，導出的時候你不知道他多久返回結果，這種情況下就很難去控制遮罩時間，數據量一大，導出沒見出來然后就一頓點導出，結果可想而知。
所以就想著有沒有方法可以讓他有返回函數，第二種方法就這樣來了。

2 .XMLHttpRequest

function ExportFile(url, data, loadSuccess, timeout) {$.messager.progress({msg:'正在導出處理,請耐心等待...'});//loading效果var xmlResquest = new XMLHttpRequest();xmlResquest.open("POST", url, true);xmlResquest.setRequestHeader("Content-type", "application/json");xmlResquest.timeout = timeout || (1000 * 60);// 超時時間，單位是毫秒xmlResquest.responseType = "blob";//該屬性必須設置xmlResquest.onload = function (oEvent) {$.messager.progress('close');//關閉loading效果var retData = { Success: true, errorMsg: ["導出成功！"] };var content = xmlResquest.response;var blob = new Blob([content]);if (xmlResquest.getResponseHeader("content-disposition")) {//判斷有沒有請求頭content-disposition，該請求頭在后臺文件流導出成功時添加var explorer = navigator.userAgent;var elink = document.createElement('a');var fileName = xmlResquest.getResponseHeader("content-disposition").split(";")[1].split("=")[1];//獲取文件名//響應頭中的內容如果包含中文會出現亂碼，需要解碼才能正常顯示if (explorer.indexOf("MSIE") >= 0 || explorer.indexOf("Chrome") >= 0) { //IE和google瀏覽器fileName = decodeURIComponent(fileName);} else {fileName = decodeURI(escape(fileName));}elink.download = fileName;elink.style.display = 'none';elink.href = window.URL.createObjectURL(blob);document.body.appendChild(elink);elink.click();document.body.removeChild(elink);window.URL.revokeObjectURL(url);if (loadSuccess && $.isFunction(loadSuccess)) loadSuccess(retData, oEvent);} else {//后臺出現異常時的處理var r = new FileReader();r.readAsText(blob, 'utf-8');r.onload = function (e) {if (loadSuccess && $.isFunction(loadSuccess)) loadSuccess(JSON.parse(r.result), oEvent);}}};xmlResquest.ontimeout = function (e) {$.messager.progress('close');$.messager.error("導出超時，請重新導出！");};xmlResquest.onerror = function (e) {$.messager.progress('close');$.messager.error("導出時出現錯誤，導出失敗！");};xmlResquest.send(JSON.stringify(data));//發送請求}

總結

以上是生活随笔為你收集整理的jquery导出并下载报表的方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。