带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路径
      //这个时候就可以设置到<img>中显示了
      //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()
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,278评论 0 7
  • Ajax和XMLHttpRequest 我们通常将Ajax等同于XMLHttpRequest,但细究起来它们两个是...
    changxiaonan阅读 2,283评论 0 2
  • 这应该是你见过的最全前端下载总结 自己整理的一些项目中遇到过的关于上传和下载的一些Demo,大前端系列(也就是纯前...
    周小肆阅读 1,676评论 1 12
  • 那时候山花烂漫 我们闭口不言 总以为有大把的时间
    子靑阅读 255评论 0 5
  • 时常羡慕别人出口成章,写文章如行云流水。效仿别人,通过大量的阅读,增加自己的知识储备量,希望能达到别人的写作水平。...
    向日葵露阅读 103评论 0 2