最近有個需求是在頁面導入文件,后端進行處理后返回處理結果的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個字符
