a标签下载文件 添加token

5,003 阅读1分钟
图片请求时需要携带token的情况

      setHeader () {
        let img = document.getElementById('imgProcess')
        let url = img.getAttribute('authSrc')
        let request = new XMLHttpRequest()
        request.responseType = 'blob'
        request.open('get', url, true)
        request.setRequestHeader('Authorization', getToken())
        request.onreadystatechange = e => {
            if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
                img.src = URL.createObjectURL(request.response)
                img.onload = () => {
                    URL.revokeObjectURL(img.src)
                }
            }
        }
        request.send(null)
      },

创建一个a标签下载文件、有时候下载文件需要权限,需要添加token

    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.responseType = "blob"; // 返回类型blob  blob 存储着大量的二进制数据
    xhr.setRequestHeader('Authorization', getToken()) // 添加toke下载文件
    xhr.onload = function () {
        console.log(xhr)
        if (this.status === 200) {
            var blob = this.response;
            var fileName = decodeURIComponent(xhr.getResponseHeader("content-disposition").split(";")[1].split("filename=")[1]);
            var reader = new FileReader();
            reader.readAsDataURL(blob); // 转换为base64,可以直接放入a标签href
            reader.onload = function (e) {
                var a = document.createElement("a"); // 转换完成,创建一个a标签用于下载
                a.download = fileName;                
                a.href = e.target.result;
                document.body.appendChild(a);; // 修复firefox中无法触发click               
                a.click();
                document.body.removeChild(a);                 //释放之前创建的URL对象
                window.URL.revokeObjectURL(url);            };
        }
    }
    xhr.send(); // 发送ajax请求

下载兼容IE

  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  //设置请求头参数的方式,如果没有可忽略此行代码
  xhr.setRequestHeader("Authorization",`Bearer ${idToken}`));
  //设置响应类型为 blob
  xhr.responseType = 'blob';
  //关键部分
  xhr.onload = function (e) {
    //如果请求执行成功
    if (this.status == 200) {
      var blob = this.response;
      var a = document.createElement('a');
      // blob.type = "application/octet-stream";
      var url = window.URL.createObjectURL(blob);
      var fileName = decodeURIComponent(xhr.getResponseHeader("content-disposition").split(";")[1].split("filename=")[1]);
      if (window.navigator.msSaveBlob) {
        try {
          window.navigator.msSaveBlob(blob,fileName)
        } catch (e) {
          console.log(e);
        }
      } else {
        a.href = url;
        a.download = fileName ;
        document.body.appendChild(a); // 火狐浏览器 必须把元素插入body中
        a.click();
        document.body.removeChild(a);
        //释放之前创建的URL对象
        window.URL.revokeObjectURL(url);
      }
   }