快捷導(dǎo)航

Angular利用HTTP POST下載流文件的步驟記錄

更新時(shí)間：2020年07月26日 10:43:39 作者：Guoye

這篇文章主要給大家介紹了關(guān)于Angular利用HTTP POST下載流文件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用Angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

Angular / Vue HTTP POST下載流文件

HTTP POST 請求流文件轉(zhuǎn)成excel

在使用Angular開發(fā)項(xiàng)目時(shí)，通常會(huì)有下載文件的功能項(xiàng)。一般是后臺(tái)返回下載地址，通過 <a> 標(biāo)題或者使用 window 打開下載地址新窗口，瀏覽器則會(huì)識(shí)別出流文件進(jìn)行文件下載。

但是，有時(shí)候進(jìn)行http異步請求，后臺(tái)返回的并不是下載地址，而是直接返回一個(gè)文件流，這時(shí)如何使用http請求回來的文件流轉(zhuǎn)換成文件下載？

其實(shí)并非Angular框架存地這樣的情況，其他PWA如Vue,React甚至Jquery都通過http xhr進(jìn)行請求而獲取的流文件，瀏覽器也并不會(huì)自動(dòng)識(shí)別并自動(dòng)下載。

那當(dāng)然，肯定有解決方案。

方案思路：

http請求使用blob的返回類型,獲取文件流后,對數(shù)據(jù)進(jìn)行Blob,再提交給瀏覽器進(jìn)行識(shí)

下面是代碼示例

/**
 * 導(dǎo)出excel
 */
exportExcel(){
 const params = {}; // body的參數(shù)
 const queryParams = undefined; // url query的參數(shù)
 this.http.post(this.exportUrl, params, queryParams, {
 responseType: "blob",
 headers: new HttpHeaders().append("Content-Type", "application/json")
 }).subscribe(resp=>{
 // resp: 文件流
 this.downloadFile(resp);
 })
}

/**
 * 創(chuàng)建blob對象，并利用瀏覽器打開url進(jìn)行下載
 * @param data 文件流數(shù)據(jù)
 */
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);
 // 打開新窗口方式進(jìn)行下載
 // window.open(url); 

 // 以動(dòng)態(tài)創(chuàng)建a標(biāo)簽進(jìn)行下載
 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);
}

總結(jié)

到此這篇關(guān)于Angular利用HTTP POST下載流文件的文章就介紹到這了,更多相關(guān)Angular用HTTP POST下載流文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: