前端下載 Excel 文件，Blob 物件使用

在做一些後台的報表數據時，可能會遇到，點擊【下載】按鈕後，直接實現下載 Excel 文件功能。

前端需要解析後端返回的二進制流文件，返回新建立的 Blob 物件，再創建 a 標籤，利用 a 標籤的 href 屬性，載入數據流，同時還可以自定義文件名稱。

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);
  }
},

REFERENCE

前端下载excel文件
MDN

Hey！想學習更多前端知識嗎?

最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手，又或是想學 RWD 的初學者，
我們將帶你從零開始，深入了解並掌握 RWD 響應式網頁設計的核心技術，快來一起看看吧 😊

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。