正常情況下,我們使用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();
});
以上文章敘述如有錯誤及觀念不正確,請不吝嗇指教:)
有任何家教、案子 或技術相關問題 請都歡迎聯繫我