API 設定 `responseType`

Axios api

在 API 的地方加上 responseType: 'blob'

export function exportExcel() {
  return request({
    url: '/excel/file',
    method: 'GET',
    responseType: 'blob',
  });
}

建立 Blob

var aBlob = new Blob( array, options );

array 可以是一個由 ArrayBuffer、ArrayBufferView、Blob 組成的 Array 物件，或是上述多種型別物件的混合陣列。這個陣列將會被放進新建立的 Blob 物件當中。DOMStrings 的編碼為 UTF-8。
options 是選擇性的 BlobPropertyBag 字典物件，有以下兩個指定的屬性：
- type 屬性，預設值為空字串 ""，表示將被放進 Blob 物件的陣列內容之 MIME 類型。
- endings 屬性，表示包含 \n 換行字元的字串要如何輸出，預設值為字串 "transparent"。此屬性值可為："native"，代表換行字元會被轉為目前作業系統的換行字元編碼。也可以是 "transparent"，代表保留 Blob 物件中資料的換行字元。

自訂檔名

可以利用 download 屬性來自定義下載檔案名稱

async downloadExcel() {
  try {
    const res = await exportExcel();
    const url = URL.createObjectURL(new Blob([res], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    }));
    const link = document.createElement('a');
    link.href = url;
    link.download = '文件檔案名稱';
    document.body.appendChild(link);
    link.click();
  } catch (err) {
    console.log(err);
  }
},

抓 content-disposition 取得檔名

抓取 header 的 content-disposition 填入檔案名稱

如瀏覽器支援 filename*=UTF-8 則顯示此檔名

如不支援則顯示 filename= 的檔名

async downloadExcel() {
  try {
    const res = await exportExcel();
    const blob = new Blob([res.data], { type: res.data.type });
    const url = window.URL.createObjectURL(blob);
    const disposition = res.headers['content-disposition'];
    const filenameDecode = decodeURIComponent(disposition).split("filename*=UTF-8''")[1];
    const filename = disposition.split('filename=')[1].split(';')[0];
    const link = document.createElement('a');
    link.href = url;
    if (filenameDecode) {
      link.download = filenameDecode;
    } else {
      link.download = filename;
    }
    document.body.appendChild(link);
    link.click();
  } catch (err) {
    console.log(err);
  }
},