用ajax下载字节流形式的excel文件

原因:ajax请求只是个“字符型”的请求,即请求的内容是以文本类型存放的。文件的下载是以二进制形式进行的,ajax没法解析后台返回的文件流,所以无法处理二进制流response输出来下载文件。

解决方法:使用form表单提交实现文件下载

1,后台代码实现方法:

// 生成excel文件
@RequestMapping(value = "/study", method = RequestMethod.POST)
public void study(@RequestBody ParamVO paramVO, HttpServletResponse response) throws UnsupportedEncodingException {
response.setContentType("application/octet-stream;charset=utf-8");
response.setContentType("application/vnd.ms-excel");
response.setHeader("Content-disposition", "attachment;filename=" + new String(paramVO.getFileName().getBytes("utf-8"), "iso-8859-1"));
try (ByteArrayOutputStream bos = templateService.excel(paramVO);
BufferedOutputStream out = new BufferedOutputStream(response.getOutputStream())) {
out.write(bos.toByteArray());
response.setHeader("Content-Length", String.valueOf(bos.toByteArray().length));
} catch (Exception e) {
e.printStackTrace();
}
}

2,前端页面使用Ajax下载文件

var xhr = new XMLHttpRequest();
xhr.open('post', 'http://localhost:8080/user/export', true);
xhr.responseType = 'blob';
xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
xhr.onload = function () {
if (this.status == 200) {
var blob = this.response;
var a = document.createElement('a');
var url = window.URL.createObjectURL(blob);
a.href = url;
//设置文件名称
a.download = '用户信息.xls';
a.click();
}
}
xhr.send(JSON.stringify({
"type" : 1,
"startDate" : "2018-01-01",
"endDate" : "2018-12-31"
}));
}

或者前端也可以这样实现:

{
var xhr = new XMLHttpRequest();
xhr.open('post', 'http://localhost:8080/user/export', true);
xhr.responseType = 'blob';
xhr.onload = function () {
var blob = this.response;
if(window.navigator.msSaveOrOpenBlob){
window.navigator.msSaveBlob(blob, 'msSaveBlob_testFile.txt');
}else{
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'msSaveBlob_testFile.txt';
link.click();
window.URL.revokeObjectURL(link.href);
}
xhr.send(null);
}
}

本文转自:https://blog.csdn.net/hj7jay/article/details/86309968

上一篇:js原生数组去重


下一篇:亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读