What

• 实习的第二周的周一，我被安排实现一个：把数据库的数据，导出到Excel并下载 的功能，然后做成公共调用的接口
• 在实现前后端代码后，发现点击 导出 按钮后，前端后端都不报错，但是浏览器没有相应的 响应下载
• 项目是采用Spring Boot + Vue的前后端分离，其中所有的请求都是封装在对应的 xxxAPI.js 里面，都是使用的 axios 封装的 AJax 来发送请求的

Why

• 我百思不得其解时，按F12进入了Console，看见了封装好的data数据，这些数据本来应该是有浏览器响应的，却被js捕获输出，才恍然大悟
• 原来Ajax请求后，只能接收 json,text,html,xml 格式的返回值，ajax使用时会强制将返回信息序列化，也就是转换成对应格式的字符串
• 所以，后端返回的二进制文件输出流，在前端被js强制序列化，返回的流都转成了js内存区域中的缓存，浏览器自然没法捕获数据流，也就没法响应下载了

How

• 第一种解决办法

  • 把请求的URL，放在 a标签的的 href 属性内

  • 或者 用 window.open("downLoadURL") 或 window.location.href("downLoadURL")

  缺点：不方便带过滤条件要求的传参，而且有新页面打开或刷新

• 第二种解决办法

  • 使用jQuery创建HTML元素（创建后用了，再remove；或者HTML中创建标签，把style的display设置为none）：
    • a 标签，js手动拼参数到href，再click
    • form 表单，js手动指定input的value，再submit
    • iframe 内联框架，js手动指定iframe的src，自动转跳

  其本质，都是 不通过Ajax请求 来发送和接收数据，而是直接将 返回的数据流 发送到浏览器