前端异步请求无法下载文件

使用Axios（ajax）下载文件

最近在做一个vue项目，使用Axios下载文件时发现请求失败无法下载，返回结果是一堆乱码，但是直接在浏览器输入网址却是可以下载的。查询资料找到原因如下：

ajax无法下载文件的原因

• 下载其实是浏览器的内置事件，浏览器的 GET请求（frame、a）、 POST请求（form）其特点上response会交由浏览器处理并且内容可以为二进制文件、字符串等
• 但是ajax的请求是不一样的，其请求的response会交由Javascript处理，并且内容只能接收字符串才能继续处理，因此ajax本身无法触发浏览器的下载功能。

如何解决下载问题

• 使用window.location.href = this.base_url + “/**”
• 使用a标签

<a href="**">下载文件</a>

• 使用异步请求

this.$http({
    
    
  method: "get",
  url: this.base_url + "/***",
  responseType: "blob",
}).then((response) => {
    
    
  let excel = new Blob([response])
  let url = URL.createObjectURL(excel)
  let a = document.createElement("a")
  a.href = url
  a.download = "下载文件的名字.zip"
  a.click()