文件流形式下载文件

1、需求

下载文件，掉接口后后端返回文件流。使用window.location.href=url不能正确下载文件

2、解决

    let url = `/event/export?start=${params.start}&end=${params.end}${modules}`;
    let xhr = new XMLHttpRequest();
    xhr.open("GET", url, true); // 也可以使用POST方式，根据接口
    xhr.responseType = "blob"; // 返回类型blob，XMLHttpRequest支持二进制流类型
    xhr.onload = function() {
      if (this.status === 200) {
        let blob = this.response; //使用response作为返回，而非responseText
        let reader = new FileReader();
        reader.readAsDataURL(blob); // 转换为base64，可以直接放入a标签href
        reader.onload = function(e) {
          // 转换完成，创建一个a标签用于下载
          let a = document.createElement("a");
          a.download = "原始数据.xlsx";
          a.href = e.target.result;
          a.click();
        };
      }
    };
    xhr.send();

原因：ajax无法请求流文件，需要使用XMLHttpRequest 请求
参考：ajax 请求二进制流 图片文件XMLHttpRequest 请求并处理二进制流数据 之最佳实践

3、简述blob对象

• 代表二进制类型的对象，表示不可变的类似文件对象的原始数据，通俗点说，就是Blob对象是二进制数据，但它是类似文件对象的二进制数据。
• blob URL 是blob形式的url，格式blob:http://XXX，可以通过URL.createObjectURL(blob)创建。
• blob URL只能应用内部使用，不能像data URL一样在浏览器上随意使用。