ajax 直接下载文件

需求

最近由于项目需求,需要下载导出EXCEL格式的文件,后台接口返回二进制流文件,不能通过a标签方式直接下载。


解决方案

  1. ajax返回响应数据的类型修改为blob
  2. 拿到response返回值
  3. 创建临时下载链接
  4. 通过js创建一个a标签下载
  5. 删除临时下载链接
    let xhr = new XMLHttpRequest();
    xhr.open("POST", url, true); 
    xhr.responseType = "blob";    //ajax返回响应数据的类型修改为blob
    xhr.onload = function() {
      if (this.status === 200) {
        let blob = this.response; //使用response作为返回值。 
        let url = URL.createObjectURL(blob); // 创建临时下载链接
        let fileName = `${new Date().valueOf()}.xlsx`; //自定义文件名和文件后缀
        // 转换完成,创建一个a标签用于下载
        let a = document.createElement("a");
        a.download = fileName;
        a.href = url;
        a.click();
        URL.revokeObjectURL(a.href); //删除临时链接
      }
    };
    xhr.send();

Blob: Blob对象可以看做是存放二进制数据的容器,一个类文件对象,可以用它来表示一个文件,此外还可以通过Blob设置二进制数据的MIME类型。

createObjectURL: URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

revokeObjectURL: URL.revokeObjectURL() 静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。