在JS中如何发送ajax请求,并且解析后台返回的Blob类型数据,将数据转换为文件导出,附带兼容IE8等浏览器
普通的jQuery中的ajax请求后台,并不能处理Blob类型的数据,这里用的原生的XMLHttpRequest请求后台
这里是做报表导出功能的一种实现:
//点击-报表导出-执行事件
function reportExport(){
// 获取页面当前选中记录行
var rows = $('#datagridTable').datagrid('getSelections');
// 判断是否有选中记录
if (rows.length == 0) {
$.walk.alert("请先选中需要导出的数据!", "info");
return;
}
$.walk.confirm("确定要导出选中的数据吗?", function(data) {
if (!data) {
return false;
}
//组装数据-这个参数用来在后台查询SQL获取导出数据用
var tradeIds = "";
for (var i = 0; i < rows.length; i++) {
tradeIds += rows[i].TRADE_ID + ",";
}
var originName = "物流配送日交接单";//导出文件的名称设置
var url = baseUrl + "/logisticsStatus/saveDeliverRecords";//设置后台请求映射
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true); // 设置请求方式POST方式
xhr.responseType = "blob"; // 返回类型blob
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求内容类型
// 请求回调函数,在请求后台完成,后台返回数据后执行此方法onload
xhr.onload = function() {
if (this.status != 200) {// 判断请求状态码,看请求是否成功执行
$.walk.alert("导出失败!", "info");
return;
}
var content = this.response; //获取后台响应内容
//解析后台返回的文件内容,这里主要是处理Blob类型
var excelBlob = new Blob([ content ], {type : 'application/vnd.ms-excel'});
var fileName = originName + ".xlsx";//
//浏览器兼容处理
if (isIE()) {
window.navigator.msSaveOrOpenBlob(excelBlob, fileName);
} else {
var a = document.getElementById("exportbtn");
a.href = URL.createObjectURL(excelBlob);
a.download = fileName;
a.click();
a.href = "";
}
//数据导出成功后,刷新前台列表 datagrid
$('#datagridTable').datagrid("reload");
};
// 发送ajax请求
xhr.send("tradeIds=" + tradeIds + "&originName=" + originName);
});
}
//判断是否IE浏览器
function isIE() {
if (!!window.ActiveXObject || "ActiveXObject" in window) {
return true;
} else {
return false;
}
}