利用AJAX实现Excel报表导出【解决乱码问题】
在项目开发里，导出Excel报表是个挺常见的需求。但场景一旦复杂起来，常规方法就容易碰壁。比如，接口需要Token认证，直接用A标签就行不通；页面交互复杂，表单提交的方式也不适用。这时候，前端采用AJAX请求、后端返回文件流的方案，就成了一个自然而然的思路。
背景
具体来说，我们需要前端通过AJAX发起请求，后端设置好相应的响应头（Header），将Excel文件以二进制流的形式返回，再由前端触发浏览器下载。听起来流程清晰，但实际操作时，一个棘手的“乱码”问题却跳了出来。
第一版尝试：jQuery AJAX
主要代码
前端（jQuery AJAX）
var queryParams = {"test":"xxx"};
var url = "xxx";
$.ajax({
type : "POST", //提交方式
url : url,//路径
contentType: "application/json",
data: JSON.stringify(queryParams),
beforeSend: function (request) {
request.setRequestHeader("Authorization", "xxx");
},
success : function(result) {
const blob = new Blob([result], {type:"application/vnd.ms-excel"});
if(blob.size < 1) {
alert('导出失败，导出的内容为空！');
return
}
if(window.na vigator.msSa veOrOpenBlob) {
na vigator.msSa veOrOpenBlob(blob, 'test.xls')
} else {
const aLink = document.createElement('a');
aLink.style.display = 'none';
aLink.href = window.URL.createObjectURL(blob);
aLink.download = 'test.xls';
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
}
}
});
后端（Spring Boot + EasyPOI）
import cn.afterturn.easypoi.excel.ExcelExportUtil;
import cn.afterturn.easypoi.excel.entity.ExportParams;
@PostMapping(value = "/download")
public void downloadList(@RequestBody Objct obj, HttpServletResponse response) {
......
List excelList = new ArrayList<>();
// excel总体设置
ExportParams exportParams = new ExportParams();
// 指定sheet名字
exportParams.setSheetName("test");
Workbook workbook = ExcelExportUtil.exportExcel(exportParams, Custom.class, excelList);
response.setContentType("application/vnd.ms-excel");
response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("test", "utf-8") + ".xls");
OutputStream outputStream = response.getOutputStream();
workbook.write(outputStream);
outputStream.flush();
outputStream.close();
......
}
测试结果与问题定位
文件倒是能正常触发下载，但打开一看，内容全是乱码。问题出在哪儿？排查方向通常指向这么几个点：
1. 后端响应未正确设置字符编码，或者被Spring的过滤器统一处理了；
2. 前端页面本身的字符集设置有问题；
3. 最关键的一点，需要在AJAX请求中指定 responseType = “arraybuffer”，告诉浏览器期待一个二进制数组缓冲的响应。
经过一番测试，基本可以断定问题就出在第三点。然而，即便在jQuery的AJAX配置里加上了这个参数，乱码依然顽固地存在，问题并未解决。
第二版方案：原生AJAX
主要代码
既然jQuery的路子暂时走不通，那就回归本源，试试原生AJAX。后端代码保持不变。
var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.open("POST", url, true);
xhr.onload = function () {
const blob = new Blob([this.response], {type:"application/vnd.ms-excel"});
if(blob.size < 1) {
alert('导出失败，导出的内容为空！');
return;
}
if(window.na vigator.msSa veOrOpenBlob) {
na vigator.msSa veOrOpenBlob(blob, 'test.xls')
} else {
const aLink = document.createElement('a');
aLink.style.display = 'none';
aLink.href = window.URL.createObjectURL(blob);
aLink.download = 'test.xls';
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
return;
}
}
xhr.setRequestHeader("Authorization", "xxx");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(queryParams));
测试结果
切换为原生AJAX并明确设置 xhr.responseType = "arraybuffer" 后，再次导出。这次下载的Excel文件打开清爽，乱码问题迎刃而解。
总结
问题的根源就在于对二进制流数据的处理方式上。设置 responseType 为 “arraybuffer” 是关键一步，它能确保浏览器正确解析后端返回的Excel文件流。从实践来看，这个参数在原生XMLHttpRequest中效果明确，直接生效。而在jQuery的AJAX方法中，由于封装层次的原因，相关配置可能未能完全生效，这也是一个需要注意的兼容性细节。希望这个踩坑经历和解决方案，能帮你顺利搞定AJAX导出Excel时的乱码难题。
