Ajax导出Excel报表实现方法与步骤详解
利用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时的乱码难题。
相关攻略
需要注意的问题 在实现SpringMVC结合Ajax进行批量新增功能时，有几个常见的“坑”需要提前留意。这些细节如果处理不当，很容易导致功能无法正常运行。具体来说，主要集中在以下几个方面： MVC框架中，如何正确处理前端传递的日期格式字符串。 当使用@ResponseBody注解返回一个自定义对象时
利用AJAX实现Excel报表导出【解决乱码问题】 在项目开发里，导出Excel报表是个挺常见的需求。但场景一旦复杂起来，常规方法就容易碰壁。比如，接口需要Token认证，直接用A标签就行不通；页面交互复杂，表单提交的方式也不适用。这时候，前端采用AJAX请求、后端返回文件流的方案，就成了一个自然而
Ajax实现文件上传功能详解与Spring MVC代码实例 今天，咱们来聊聊一个在Web开发中既基础又高频的需求——通过Ajax实现文件上传。很多开发者在初次接触时，可能会在处理表单数据和服务器接收上遇到点小麻烦。别担心，下面这个完整的Spring MVC示例，或许能帮你理清思路。 前端表单与JQu
Ajax对xml信息的接收和处理操作实例分析 今天我们来拆解一个经典的前端技术组合应用：如何通过Ajax接收XML信息，并利用DOM技术对其进行处理。这个流程，其实是现代Web应用中数据交互的一个非常典型的范式。 核心角色分工 整个过程可以看作一场精密的“接力赛”： Ajax负责从服务器端请求并接收
Ajax验证用户名是否存在的实例代码详解 在日常的Web项目开发中，注册功能里的用户名查重，几乎是每个新手必做的练习。这不，为了让大家对Ajax实现实时验证的流程有个透彻的理解，今天咱们就来拆解一个非常典型的例子，看看从前端页面、Ja vaScript逻辑，到后台Servlet、Service层，乃
热门专题
热门推荐
安币合约交易中，开仓与平仓是核心操作。开仓需选择合约类型、方向，设置杠杆与价格，并管理风险。平仓则分为止盈止损、市价及手动平仓，关键在于执行计划。新手应理解保证金机制，从小额开始，避免情绪化交易，逐步积累经验。
《星际火狐》新作公布后角色新设计引发争议。原设计师今村孝矢表示未参与此次监修，并坦言偏爱电影版福克斯形象，但对新版明确的设计方向持开放态度。作为系列经典重制，新作回归令创作者欣慰，角色革新虽伴随争议，但有望如过往案例般逐渐被接纳。
《找个球》第18关考验玩家的观察力与细致程度。本关需要玩家在画面中找出所有不同之处，其中两位角色身上就隐藏着4处关键差异，而背景中的盆景造型、挂画内容、灯笼样式以及窗户细节等处也均有变化。想要快速通关，可以参考下方的详细答案图解进行逐一核对。 《找个球》全关卡图文通关攻略合集 《找个球》第18关通关
在《三国杀：武将觉醒》的众多限定招募武将中，无双品质的「貂蝉」以其独特的辅助机制与战场掌控力，成为许多玩家阵容构筑的核心选择。这位以曼妙舞姿影响战局的佳人，不仅能显著加速自身的行动频率，还能为队友提供强大的攻击力加成与护盾保护。其专属武器的效果，更让她在面对男性武将时占据优势。当星级提升后，她甚至能
《找个球》第17关的挑战正式开启。本关的找不同图片中，两位主要角色身上隐藏着六处关键差异，同时周围的荷花丛中也分布着多处不易察觉的细节。部分变化非常细微，需要玩家集中注意力，仔细对比观察。无需担心，下方提供的通关答案图将为您提供清晰的指引，对照查找即可顺利过关。 想要一次性获取所有关卡的通关秘籍？欢