Angular 實作檔案下載(瀏覽器自動下載)

前言

正常情況下，我們使用Angular發送Request取得API資料時，常見的情境都是取得json的格式。

因此HttpClient，預設會將response的內容自動轉換為json格式。

那，要如何實作檔案下載呢?

需利用Angular的HttpClient透過瀏覽器下載檔案，首先我們需要先指定回傳的型別(responseType)為blob(二進位格式)

註: 此步驟一定要做，因為HttpClient預設會將回傳格式設定為json格式，因此我們需要指定為blob格式才能下載。

1	let opton = { responseType: 'blob' as 'json' }

接著將response的內容轉換為blob格式，並透過的href屬性，來自動下載。

完整程式碼如下:

// http.post 有以下三個參數需要給予(apiPath,body,option):
// apiPath 為後端API路徑
// body 為透過POST方式傳遞給後端API的參數(object)
// option為發送request時所需要的額外設定(例如該範例為，將response的型態設定為blob格式。)

this.http.post<any>('your API path', body, { responseType: 'blob' as 'json' }).subscribe(x => {
      
this.blob = new Blob([x], { type: 'application/docx' }); // application後面接下載的副檔名

      let downloadURL = window.URL.createObjectURL(this.blob);
      let link = document.createElement('a');
      link.href = downloadURL;
      link.download = "template.docx"; //瀏覽器下載時的檔案名稱
      link.click();
    });

以上文章敘述如有錯誤及觀念不正確，請不吝嗇指教:)

有任何家教、案子或技術相關問題請都歡迎聯繫我

http://www.zhenghui.idv.tw/