Ajax請求導出Excel的問題

參考：https://www.cnblogs.com/xbq8080/p/7344258.html

1.Ajax請求導出Excel的問題描述：

　　前端發起Ajax請求get或post，后台使用Poi生成excel文件，最后用response輸出excel文件流。整個調用過程都沒有報任何錯，excel文件也生成在本地，但瀏覽器沒有彈出文件下載，毫無反應。

2.解決：

　　開始一直以為是瀏覽器兼容性，或后台輸出文件流代碼有問題，調了半天，也都一樣，不報任何錯。后來上網搜發現在類似的問題，Ajax導出excel沒反應，網上有人說不能使用ajax，換成地址重定向 window.location.href 就行，一換還真好使。

function() {
    var stime = $("#layerdate").val();
    var etime = $("#layerdate2").val();
    window.location.href = "${pageContext.request.contextPath}/user/export?stime="+stime+"&etime="+etime;
}

　　

但是當需要傳一個很大數據到后台（window.location.href= actionUrl + "?" + data;），就會出問題了，當然，當數據量不大的時候，使用這種方式是極好的。導致這個問題的原因是各種瀏覽器對URL解析的長度限制是不同的。

• Microsoft Internet Explorer (Browser)：IE瀏覽器對URL的最大限制為2083個字符，如果超過這個數字，提交按鈕沒有任何反應。
• Firefox (Browser)：對於Firefox瀏覽器URL的長度限制為65,536個字符
• Safari (Browser)：URL最大長度限制為 80,000個字符。
• Opera (Browser)：URL最大長度限制為190,000個字符。
• Google (chrome)：url最大長度限制為8182個字符

　　解決方法就換成了使用隱藏form來執行導出操作，如下：

<a href="javascript:void(0)" onclick="exportExcel()">導出1</a>

// 導出，使用這種方式 可以，使用 ajax請求不可以 導出excel
function exportExcel(){
     var form = $("<form>");
     form.attr('style', 'display:none');
     form.attr('target', '');
     form.attr('method', 'post');
     form.attr('action', '${pageContext.request.contextPath}/user/export');

     var input1 = $('<input>');
     input1.attr('type', 'hidden');
     input1.attr('name', 'item');
     input1.attr('value', 'test');      /* JSON.stringify($.serializeObject($('#searchForm'))) */

     $('body').append(form);
     form.append(input1);
     
     form.submit();
     form.remove();    
}

 

3.總結：

　　導出excel為什么不能用ajax請求？

　　因為導出excel，實際上是文件下載，后台需要往前端（瀏覽器）寫文件流的。而Ajax請求獲取數據都是“字符串”，整個交互傳輸用的都是字符串數據，它沒法解析后台返回的文件流，但瀏覽器可以。

4.Ajax與Form表單提交的區別：

　　Ajax提交不會自動刷新頁面，需要手動處理。

　　Form表單提交在數據提交后會刷新頁面，如果是Post提交，點擊刷新瀏覽器會提示 是否再次提交。