前后端分离 AJAX 文件下载解决方案

【场景描述】

微服务架构中，使用前后端分离设计，用户点击导出下载Excel列表，通过AJAX与后端SpringMVC交互获取下载文件，请求需要携带Authorization认证信息，并且需要考虑到IE浏览器的兼容问题

【解决方案】

Ajax下载文件的这种方式本来就是禁止的。出于安全因素的考虑，javascript是不能够保存文件到本地的，

所以ajax考虑到了这点，只是接受json,text,html,xml格式的返回值，二进制的返回格式就会抛出这个异常。ajax请求只是个“字符型”的请求，即请求的内容是以文本类型存放的。

文件的下载是以二进制形式进行的，虽然可以读取到返回的response，但只是读取而已，是无法执行的，js是无法调用到浏览器的下载处理机制和程序。

如果非要使用ajax的话，只能通过返回值得到生成的文件相关url。一个对文件生成流的处理url，这样操作来实现文件下载且页面无刷新。

后端返回二进制文件，前端通过 blob 数据格式接收，并通过构建a链接URL的方式实现文件的下载

【前端代码】

1：注意考虑IE浏览器的XMLHttpRequest兼容性问题
2：设置响应接收的类型为blob
3: 请求类型这里设置为json，是因为我在传输FormData时后端一直获取失败于是使用这种方式获取参数
4：AJAX请求头中添加Authorization认证Token
5：创建Blob接收后端返回的文件流对象
6：通过返回值得到生成的文件相关url
7：IE浏览器使用link.click();没反应，需要使用window.navigator.msSaveBlob(blob, downloadFileName);构建

function excelExport(url, params) {let xhr;if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();} else {//IExhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open('post', url);xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8')xhr.responseType = 'blob';xhr.setRequestHeader("Authorization", "Bearer " + localStorage.getItem("access_token"))xhr.send(JSON.stringify(params));xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {const blob = new Blob([xhr.response])let urlBlob = window.URL.createObjectURL(blob)//创建一个a标签元素，设置下载属性，点击下载let link = document.createElement('a')link.href = urlBloblink.style.display = 'none'//取出下载文件名const fileName = xhr.getResponseHeader('fileName')const downloadFileName = decodeURIComponent(fileName)link.setAttribute('download', downloadFileName);//IE浏览器if (window.navigator.msSaveBlob) {try {window.navigator.msSaveBlob(blob, downloadFileName);} catch (e) {console.log(e);}} else {link.click();}}}
}

参考的前端调用示例

function ebotMonitorExport() {let exportUrl = "/api-m/XXXX/XXXX/export";let searchVo = {code: $("#code").val(),name: $("#name").val()};excelExport(exportUrl, searchVo);
}

【后端代码】

后端就是一般的导出逻辑，返回文件流，唯一注意的就是需要返回的文件名称放在响应流头中
setResponseHeader(response, fileName);

  @PostMapping("/export")public void export(@RequestBody ExportVO vo, HttpServletResponse response) {service.export(vo, response);}

 //根据条件查询数据List<XXX> list = mapper.selectByExample(vo);//构建Excel头String[] title = {"XXX", "XXX", "XXX"};String[] fieldNames = {"code", "name", "createTime"};String filename = "数据列表" + DateUtil.getNowDateStr() + ".xls";String sheetName = "数据列表";ExcelUtil.writeExcel(list, title, fieldNames, "createTime", sheetName, response, filename);

    public static void writeExcel(List list, String[] title, String[] fieldNames, String toDateField, String sheetName,HttpServletResponse response, String fileName) {//创建HSSFWorkbookHSSFWorkbook wb = getWorkbookDetail(list, title, fieldNames, toDateField, sheetName, null, null);try {fileName = URLEncoder.encode(fileName, "UTF8");} catch (UnsupportedEncodingException e) {log.error(LogHandle.error(String.format("出现异常: %s", e.getMessage())).toString());}setResponseHeader(response, fileName);try (OutputStream os = response.getOutputStream()) {wb.write(os);} catch (IOException e) {log.error(LogHandle.error(String.format("出现异常: %s", e.getMessage())).toString());}}