Ajax下载Excel文件

最近在做项目的过程中，遇到需要使用Ajax下载Excel文件的需求，以往都是通过使用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下载文件

默认Ajax接收到的数据是 text 类型，现在需要将 responseType 设置为 blob 类型，来接收和处理服务器返回的二进制对象。

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”
}));
}
如上所述，则是 Ajax 下载文件的大致流程和方法