Springmvc下載Excel案例(二)

接着Springmvc下載Excel案例(一)繼續

上一章中使用到window.location.href進行後端調用，那麼問題來了，這種方式能夠進行調用下載Excel，不過在IE瀏覽器中會出現兼容性問題，所以新的想法是使用 ajax進行調用，於是編碼如下

$("#download2").click(function(){
			var pathName = document.location.pathname;     
		    var index = pathName.substr(1).indexOf("/");     
		    var contextRoot = pathName.substr(0,index+1);
			$.ajax({
				url:contextRoot+"/download.do",
				type:"POST",
				contentType: "application/json; charset=utf-8",
				dataType:"JSON",
				success:function(result,status){
					alert("success");
				}
			});
		});

開開心心的編碼完之後進行測試，發現沒有效果，於是用postman進行調用發現後端返回的是二進制流，在經過搜索引擎的幫助下，暫時沒發現ajax能進行處理二進制流的方法，(有一些說是使用form 表單的方式，暫時沒有實現，所以這裏不討論，如果有實現的，可以告訴我下，謝謝)。

於是使用瞭如下的解決方法

$("#download2").click(function(){
			var contextHref = getContextPath();
			var url = contextHref+"/download.do";
			var xhr = new XMLHttpRequest();
			xhr.open('GET', url, true);
			xhr.responseType = "blob";
			var fileName = "測試Excel.xls";
			xhr.onload = function (){
				if (this.status === 201) {
	        		var blob = this.response;
	        		var reader = new FileReader();
	        		reader.readAsDataURL(blob);
	        		reader.onload = function (e) {
	        			var a = document.createElement('a');
	        			a.href = e.target.result;
		        		a.download = fileName;
	     			    $("body").append(a);
	     			    a.click();
	     			    $(a).remove();
	        		}
	        	}else if(this.status === 200){
	        		showTips("時間範圍內無交易數據!");
	        	}
	        }
			xhr.send();
		});

這裏可以根據後臺返回的 status是200 還是201 進行相應的判斷，也可以生成excel，不過這裏又在IE中會出現兼容性問題，是因爲IE瀏覽器中內容的發送數據大小的限制，在google瀏覽器中測試通過。無奈之下又要放棄這種事先方式

IE瀏覽器報錯信息如下

SCRIPT122: 傳遞給系統調用的數據區域太小。