一些東拼西湊復(fù)制粘貼加上部分個(gè)人理解的原理

Blob（Binary Large Object）： 二進(jìn)制大數(shù)據(jù)對(duì)象。

在JS中， Blob類(lèi)型的對(duì)象表示文件對(duì)象的原始數(shù)據(jù)，可以通過(guò)new Blob()方法創(chuàng)建Blob對(duì)象，將后端返回的數(shù)據(jù)存儲(chǔ)到Blob對(duì)象中。

Blob用作URL：
Blob URL只能由瀏覽器在內(nèi)部生成。
URL.createObjectURL()將創(chuàng)建一個(gè)對(duì)Blob或File對(duì)象的特殊引用，稍后可以使用URL.revokeObjectURL()釋放該引用。
Blob URL/Object URL是一種偽協(xié)議，允許Blob和File對(duì)象用作圖像、二進(jìn)制數(shù)據(jù)的下載鏈接等內(nèi)容的URL源。即將后端返回的二進(jìn)制數(shù)據(jù)封裝為Blob對(duì)象，然后使用URL.createObjectURL()生成本地URL，之后通過(guò)虛擬點(diǎn)擊進(jìn)行文件下載。

代碼實(shí)現(xiàn)

在發(fā)送請(qǐng)求時(shí)，一定要聲明響應(yīng)類(lèi)型，這樣獲取到的返回?cái)?shù)據(jù)才會(huì)是文件流，另外不要對(duì)請(qǐng)求進(jìn)行過(guò)濾攔截，直接使用axios進(jìn)行請(qǐng)求，將所有后端信息全部返回：

  /** 點(diǎn)擊導(dǎo)出按鈕 下載表格 */
  async exportTest(param: any) {
    const res = await axios.post(
      "請(qǐng)求地址",
      param,
      {
        responseType: "blob",
      }
    );
    return res;
  }

在請(qǐng)求完成后，進(jìn)行數(shù)據(jù)的下載：

  const res = await exportTest(param);
  if (res) {
    const blob = new Blob([res.data]);
    const link = document.createElement("a");
    link.download = decodeURI(
      res.headers["content-disposition"].replace(/.*filename=/, "")
    ); //后端可以將文件名放在headers中返回
    link.style.display = "none";
    link.href = URL.createObjectURL(blob);
    document.body.appendChild(link);
    link.click();
    URL.revokeObjectURL(link.href);
    document.body.removeChild(link);
  }