上一章中使用到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: 传递给系统调用的数据区域太小。