在获得该文件的响应(成功的ajax方法)后,获取Excel文件并在浏览器中打开下载窗口时出现问题。我已经合适了Content-Type and Content-Disposition headers,我尝试在js中使用 Blob ,但我无法实现我想要的-简单文件下载。 我完成了几个版本的ajax,下面是其中的一个。我开发了一个ajax,它返回了由于损坏而无法正确打开的excel文件(尽管扩展名为.xlsx)。
Content-Type and Content-Disposition headers
也许问题出在Blob构造函数中使用了不合适的数据类型?
我尝试使用成功方法参数中的“ xhr.response”而不是“ data”,但是它也不起作用。我在Chrome的开发人员工具中检查了响应标头,并且它们设置正确。 重要的是-在服务器端创建的所有excel工作簿都是正确的,因为当数据是通过URL发送而不是通过ajax发布时,它可以在以前的版本中工作。
下面是Java / Spring服务器端的控制器方法:
response.reset(); response.setContentType("application/vnd.ms-excel"); response.addHeader("Content-Disposition","attachment;filename=\"" + className + " " + title + ".xlsx\""); try (ServletOutputStream output = response.getOutputStream()){ workbook.write(output); output.flush(); } catch (Exception e) { throw new RuntimeException(e); }
我的Ajax下载文件并打开下载窗口:
$.ajax({ url: myUrl, type: 'POST', data: myData, success: function(data, status, xhr) { var contentType = 'application/vnd.ms-excel'; var filename = ""; var disposition = xhr.getResponseHeader('Content-Disposition'); if (disposition && disposition.indexOf('attachment') !== -1) { var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/; var matches = filenameRegex.exec(disposition); if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, ''); } console.log("FILENAME: " + filename); try { var blob = new Blob([data], { type: contentType }); var downloadUrl = URL.createObjectURL(blob); var a = document.createElement("a"); a.href = downloadUrl; a.download = filename; document.body.appendChild(a); a.click(); } catch (exc) { console.log("Save Blob method failed with the following exception."); console.log(exc); }
看来JQuery在处理响应中的二进制数据时遇到了一些问题。我仅使用XMLHttpRequest,并将所有数据添加到URL。
var request = new XMLHttpRequest(); request.open('POST', url, true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); request.responseType = 'blob'; request.onload = function(e) { if (this.status === 200) { var blob = this.response; if(window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveBlob(blob, fileName); } else{ var downloadLink = window.document.createElement('a'); var contentTypeHeader = request.getResponseHeader("Content-Type"); downloadLink.href = window.URL.createObjectURL(new Blob([blob], { type: contentTypeHeader })); downloadLink.download = fileName; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); } } }; request.send();