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方式，根據(jù)接口
    xhr.responseType = "blob"; // 返回類型blob，XMLHttpRequest支持二進(jìn)制流類型
    xhr.onload = function() {
      if (this.status === 200) {
        let blob = this.response; //使用response作為返回，而非responseText
        let reader = new FileReader();
        reader.readAsDataURL(blob); // 轉(zhuǎn)換為base64，可以直接放入a標(biāo)簽href
        reader.onload = function(e) {
          // 轉(zhuǎn)換完成，創(chuàng)建一個(gè)a標(biāo)簽用于下載
          let a = document.createElement("a");
          a.download = "原始數(shù)據(jù).xlsx";
          a.href = e.target.result;
          a.click();
        };
      }
    };
    xhr.send();

原因：ajax無法請(qǐng)求流文件，需要使用XMLHttpRequest 請(qǐng)求
參考：ajax 請(qǐng)求二進(jìn)制流 圖片文件XMLHttpRequest 請(qǐng)求并處理二進(jìn)制流數(shù)據(jù) 之最佳實(shí)踐

3、簡述blob對(duì)象

• 代表二進(jìn)制類型的對(duì)象，表示不可變的類似文件對(duì)象的原始數(shù)據(jù)，通俗點(diǎn)說，就是Blob對(duì)象是二進(jìn)制數(shù)據(jù)，但它是類似文件對(duì)象的二進(jìn)制數(shù)據(jù)。
• blob URL 是blob形式的url，格式blob:http://XXX，可以通過URL.createObjectURL(blob)創(chuàng)建。
• blob URL只能應(yīng)用內(nèi)部使用，不能像data URL一樣在瀏覽器上隨意使用。