關於使用ajax導出excel問題
- 2020 年 3 月 14 日
- 筆記
最近有個需求是在頁面導入文件，後端進行處理後返回處理結果的excel，前端使用的是ajax。我最開始的做法是：在原有代碼後加一段導出excel的代碼，結果代碼能正常運行，但頁面始終沒有返回我需要的excel。
而後開始百度編程模式，得出以下結論：
ajax是無法直接導出excel的，因為ajax的返回值只能是字符流，而導出excel是後台往瀏覽器中寫入二進制的位元組流
導出excel有以下兩種方式：
方法一:window.location.href() & form表單.submit().
<a href="javascript:void(0)" onclick="exportExcel()">導出</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(); }
function() { var stime = $("#layerdate").val(); var etime = $("#layerdate2").val(); window.location.href = "${pageContext.request.contextPath}/user/export?stime="+stime+"&etime="+etime; }
方法二:ajax請求把參數緩存在後端返回給前端,前端ajax再次發起一個window.open(url?params=params)即可
$.ajax({ url: '../../eldercare/excel/export?_' + $.now(), type: 'post', dataType: "json", contentType : 'application/json', data : JSON.stringify(this.tableOpts), success: function(data){ window.open('../../eldercare/excel/downFromCache?params='+data.rows, '_self'); },
注意，使用window.open()或是window.location.href()時有個前端傳值限制，超過限制數會報錯。
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個字符
