带token验证的文件下载

文件的下载:

1. 最简单的就是用地址下载

window.open(url) 

url就是文件所在的地址
比如:http://....../system_files/teacher.xlsx

这样下载会打开一个网页,为了不打开新网页,可以这样做:

function(fileUrl){
   const url = fileUrl  
   const form = document.createElement('form') // 创建一个form标签 
   form.method = 'get' 
   form.action = url 
  document.body.appendChild(form) 
   form.submit()  
}

2.带token的下载

我们需要用xhr给后端发送一个带token的请求头

downloadFile(filename, fileUrl, token) {
  const xhr = new XMLHttpRequest()
  const url = fileUrl
  xhr.open('get', url, true)
  xhr.setRequestHeader('Authorization', `Bearer ${token}`) // 给后端发送请求头
  xhr.responseType = 'blob'
  xhr.onload = function(e) {
    if (this.status === 200) {
      const blob = this.response
      // URL对象是硬盘(SD卡等)指向文件的一个路径,
      //如果我们做文件上传的时候,想在没有上传服务器端的情况下看到上传图片的效果图
      //就可是以通过var url=window.URL.createObjectURL(obj.files[0]);获得一个http格式的url路径
      //这个时候就可以设置到中显示了
      //window.webkitURL和window.URL是一样的,window.URL标准定义
      //window.webkitURL是webkit内核的实现(一般手机上就是使用这个),还有火狐等浏览器的实现。
      const urlObject = window.URL || window.webkitURL || window
      const export_blob = new Blob([blob])
      const a = document.createElementNS('http://www.w3.org/1999/xhtml', 'a') // 利用a标签特性下载
      const url = urlObject.createObjectURL(export_blob)
      a.href = url
      a.download = filename
      a.click()
    }
  }
  // 发送请求
  xhr.send()
}

你可能感兴趣的:(带token验证的文件下载)