Bug

Bug,第1张

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请求 来发送和接收数据,而是直接将 返回的数据流 发送到浏览器

Bug_000_用Ajax请求来下载文件失败的原因及解决方案

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/1006645.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存