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

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

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

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

 

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

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

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

接著將response的內容轉換為blob格式,並透過 <a> 的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/