原生ajax下载文件，可带token

最新推荐文章于 2024-03-29 13:11:13 发布

原创最新推荐文章于 2024-03-29 13:11:13 发布 · 4.5k 阅读

8 ·

CC 4.0 BY-SA版权

本文探讨了在使用token进行身份验证的情况下下载文件（尤其是图片和压缩文件）的方法。介绍了如何利用XMLHttpRequest和Blob对象实现跨域下载，并解决了base64格式导致的下载失败问题，最终实现了直接下载文件的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

碰到过几次下载文件（二进制流）时需要带token的需求，现记下来。
下面这种用法应该是用于下载图片的

        let token = Cookies.get('token');
        let url= ""; 
        let xhr = new XMLHttpRequest();
        xhr.open('get', url, true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 设置请求头，必须在open后添加
        xhr.setRequestHeader('authorization', token);
        xhr.responseType = 'blob'; // 返回类型blob  blob 存储着大量的二进制数据
        xhr.onload = function () {
          if (this.status === 200) {
            let blob = this.response;
            let reader = new FileReader();
            reader.readAsDataURL(blob); // 转换为base64，可以直接放入a标签href
            reader.onload = function (e) {
              let a = document.createElement('a'); // 转换完成，创建一个a标签用于下载
              a.download = name + '.png';
              console.log(e)
              a.href = e.target.result;
              a.click();
            };
          }
        }
        xhr.send(); // 发送ajax请求

在用上面的用法来下载文件时，总是下载失败，后面排查发现，a.href后不能用base64的形式，改为：

a.href=window.URL.createObjectURL(blob);

就可以下载了。

后面还有一种方式，不需要使用fileReader。

if (this.status === 200) {
            let blob = new Blob([this.response]); // 转成文本存储
            let name = xhr.getResponseHeader('content-disposition');
            let a = document.createElement('a'); // 转换完成，创建一个a标签用于下载
            a.download = name.split('=')[1] + '.zip';
            a.href = window.URL.createObjectURL(blob); // 转成本地连接到blob文本
            a.click();
          }

注意：后台返回的请求头所带的content-type应该是application/octet-stream（二进制流）；否则不能下载成功。