记录一次使用get请求带Header头下载后端文件的操作

思路是通过原生的ajax使用get请求 响应类型设置成blob类型。通过

xhr.setRequestHeader('Authorization', this.token) // 把token带在Header头中。

然后获取到后端的文件流以后，创建一个虚拟的a标签，再把a标签设置成blob类型。再使用虚拟点击实现下载文件的操作

代码如下：

downLoadByUrl(url) {
      var xhr = new XMLHttpRequest()
      // GET请求,请求路径url,async(是否异步)
      xhr.open('GET', `/management/meeting/file/download?filePath=${url}`, true)
      // 设置请求头参数的方式
      xhr.setRequestHeader('Authorization', this.token)
      // 设置响应类型为 blob
      xhr.responseType = 'blob'
      // 关键部分
      xhr.onload = function(e) {
        // 如果请求执行成功
        if (this.status === 200) {
          console.log(this)
          const blob = this.response
          const indexs = url.lastIndexOf('/') // 这里我是直接找的链接字符串中的文件名
          const newfileName = url.slice(indexs + 1) // 找到然后截取到文件名
          var a = document.createElement('a')
          // blob.type = 'application/octet-stream'
          // 创键临时url对象
          var fileUrl = URL.createObjectURL(blob)
           // 创建下载链接
          a.href = fileUrl
          a.download = newfileName // 创建下载名
          a.click()
          // 释放之前创建的URL对象
          window.URL.revokeObjectURL(fileUrl)
        }
      }
      // 发送请求
      xhr.send()
    }

这里是直接封装成了一个下载文件的函数。 只需要直接把下载地址传进来。 就可以直接下载了。