Angular / Vue HTTP POST下載流檔案

HTTP POST 請求流檔案轉成excel

在使用Angular開發專案時，通常會有下載檔案的功能項。一般是後臺返回下載地址，通過 <a> 標題或者使用 window 開啟下載地址新視窗，瀏覽器則會識別出流檔案進行檔案下載。

但是，有時候進行http非同步請求，後臺返回的並不是下載地址，而是直接返回一個檔案流，這時如何使用http請求回來的檔案流轉換成檔案下載？

其實並非Angular框架存地這樣的情況，其他PWA如Vue,React甚至Jquery都通過http xhr進行請求而獲取的流檔案，瀏覽器也並不會自動識別並自動下載。

那當然，肯定有解決方案。

方案思路：

http請求使用blob的返回型別,獲取檔案流後,對資料進行Blob,再提交給瀏覽器進行識

下面是程式碼示例

/**
 * 匯出excel
 */
exportExcel(){
 const params = {}; // body的引數
 const queryParams = undefined; // url query的引數
 this.http.post(this.exportUrl,params,queryParams,{
 responseType: "blob",headers: new HttpHeaders().append("Content-Type","application/json")
 }).subscribe(resp=>{
 // resp: 檔案流
 this.downloadFile(resp);
 })
}

/**
 * 建立blob物件，並利用瀏覽器開啟url進行下載
 * @param data 檔案流資料
 */
downloadFile(data) {
 // 下載型別 xls
 const contentType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
 // 下載型別：csv
 const contentType2 = 'text/csv';
 const blob = new Blob([data],{ type: contentType });
 const url = window.URL.createObjectURL(blob);
 // 開啟新視窗方式進行下載
 // window.open(url); 

 // 以動態建立a標籤進行下載
 const a = document.createElement('a');
 const fileName = this.datePipe.transform(new Date(),'yyyyMMdd');
 a.href = url;
 // a.download = fileName;
 a.download = fileName + '.xlsx';
 a.click();
 window.URL.revokeObjectURL(url);
}

總結

到此這篇關於Angular利用HTTP POST下載流檔案的文章就介紹到這了,更多相關Angular用HTTP POST下載流檔案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！