解决 Ajax 与导出文件下载冲突的心路历程

前言

最近在后期调试一个项目的时候，爆出一个导出Excel无法按照查询条件导出的bug，面对这样影响用户体验的bug，有强迫症的博主我是不能忍的，所以就操刀开始修改，本以为能跟之前的一堆弱鸡bug一样，手到病除，但是并没有那么顺利，触及的知识盲区这里也跟大家分享一下，也是做个备忘。

正文

bug描述

点击查询后，导出的Excel是全部数据，并不是查询出来的数据，且不区分用户角色，均可导出全部数据

问题定位

通过从最开始的前端按钮调用的JS方法，一路查找到后端的导出实现函数，发现，前端没有往后端传筛选值

解决问题

尝试1：

解决方法：用Ajax传筛选值，到后端，然后经过条件查找得到需要的数据列表并生成Excel供下载。

结果：失败，点击导出后，没有出现下载提示框，本地服务器控制台无报错，浏览器调试response里面为乱码

到这里，我很纳闷，为什么就是死活没有下载提示呢，还没有任何报错，条件查询语句与Excel生成工具类都经过测试没有问题，要说剩下什么地方可能出了问题，那只剩下传值了。经过上网查询，我了解到Ajax所接收的数据类型有：

并没有二进制流文件类型，这也就可以解释我们添加在response里的东西为什么变成了一堆乱码。

并且，ajax是异步调用的，想要使用

response.setHeader("Content-disposition", "attachment;filename=" + filename);

来实现下载，必须由浏览器直接解析响应报文的报文头

---

尝试2：

解决方法：通过把导出的Excel保存到临时文件夹，并返回路径给前端，当前端接到success信号，再次发送请求到服务器文件路径，达到下载的目的。

结果：成功，但是，如果在一段时间内调用这个方法的用户过多，势必导致占用服务器空间的问题，就算及时清理，两次请求在时间上也会对用户体验造成影响。

到这里，本来以为自己的小聪明救了自己一命，但是经过仔细推敲，这个解决方案不够完美。

---

尝试3：

解决方法：直接使用form表单提交数据，不经过Ajax传值

结果：成功，反应很迅速

原来不传值直接调用的方法给了我提示，传值不一定非得用Ajax啊，这里又不需要使用Ajax的异步特性，明明表单提交这么简单粗暴的方式就可以了，为什么非要绕弯子呢？

---

后记

问题是解决了，也学到了知识，但是，我的心在滴血，因为，我边研究边写了半上午的前端Ajax传值、时间监听、URL设置等代码，全没用了……QAQ