从ajax中的服务器响应中获取excel文件(.xlsx)

Question

我在获取excel文件时遇到了一个问题，在获得该文件的响应(在成功的ajax方法中)后，在浏览器中打开下载窗口。我有合适的Content-Type and Content-Disposition headers，我尝试在js中使用Blob，但我无法实现我想要的——简单的文件下载
我完成了ajax的几个版本，其中一个版本如下。我开发了ajax，它返回的excel文件我无法正确打开，因为它已损坏(尽管扩展名为.xlsx)。

也许问题出在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);
}

Answer 1

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();

Answer 2

经过多次搜索，从web API获取包含Unicode内容的excel文件。最后，这个代码对我有效：

$.ajax({
type: 'GET',
cache: false,
url: "https://localhost:44320/WeatherForecast",

xhrFields: {
// make sure the response knows we're expecting a binary type in return.
// this is important, without it the excel file is marked corrupted.
responseType: 'arraybuffer'
}
})
.done(function (data, status, xmlHeaderRequest) {
var downloadLink = document.createElement('a');
var blob = new Blob([data],
{
type: xmlHeaderRequest.getResponseHeader('Content-Type')
});
var url = window.URL || window.webkitURL;
var downloadUrl = url.createObjectURL(blob);
var fileName = '';

if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(blob, fileName);
} else {
if (fileName) {
if (typeof downloadLink.download === 'undefined') {
window.location = downloadUrl;
} else {
downloadLink.href = downloadUrl;
downloadLink.download = fileName;
document.body.appendChild(downloadLink);
downloadLink.click();
}
} else {
window.location = downloadUrl;
}
setTimeout(function () {
url.revokeObjectURL(downloadUrl);
},
100);
}
});

Answer 3

我们最近也遇到了同样的麻烦。对我们来说，当我们将responseType: 'arraybuffer'添加到ajax参数时，它就开始工作了。最好使用libhttps://github.com/eligrey/FileSaver.js/，而不是手动点击链接，因为这个工具也会占用内存。