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

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

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

Angular / Vue HTTP POST下載流文件

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

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

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

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

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

方案思路：

http請(qǐng)求使用blob的返回類型,獲取文件流后,對(duì)數(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對(duì)象，并利用瀏覽器打開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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

angular基于路由控制ui-router實(shí)現(xiàn)系統(tǒng)權(quán)限控制
這篇文章主要介紹了angular基于路由控制ui-router實(shí)現(xiàn)系統(tǒng)權(quán)限控制的相關(guān)資料,需要的朋友可以參考下
2016-09-09
AngularJS入門教程之REST和定制服務(wù)詳解
本文主要講解 AngularJS REST和定制服務(wù)的知識(shí)，這里幫大家整理了相關(guān)知識(shí)，并附示例代碼，詳細(xì)講解了RES和定制服務(wù)的知識(shí)，有興趣的小伙伴可以參考下
2016-08-08
Angular實(shí)現(xiàn)類似博客評(píng)論的遞歸顯示及獲取回復(fù)評(píng)論的數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于Angular如何實(shí)現(xiàn)類似博客評(píng)論的遞歸顯示及獲取回復(fù)評(píng)論的數(shù)據(jù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-11-11
使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法
AngularJS是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。下面通過(guò)本文給大家分享使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法，需要的的朋友參考下吧
2017-07-07
Angular2.0實(shí)現(xiàn)modal對(duì)話框的方法示例
這篇文章主要介紹了Angular2.0實(shí)現(xiàn)modal對(duì)話框的方法,結(jié)合實(shí)例形式分析了angular2.0實(shí)現(xiàn)modal對(duì)話框的樣式、界面及功能等相關(guān)操作技巧,需要的朋友可以參考下
2018-02-02
angular和BootStrap3實(shí)現(xiàn)購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了angular和BootStrap3實(shí)現(xiàn)購(gòu)物車功能的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
angularjs2 ng2 密碼隱藏顯示的實(shí)例代碼
本篇文章主要介紹了angularjs2 ng2 密碼隱藏顯示的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
Angular 4依賴注入學(xué)習(xí)教程之ValueProvider的使用（七）
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之ValueProvider使用的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Angular4具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-06-06
在 Angular 中使用 ViewChild 訪問(wèn)子組件、指令或 D
這篇文章主要介紹了如何在 Angular 中使用 ViewChild 來(lái)訪問(wèn)子組件、指令或 DOM 元素,在本教程中,您使用了 ViewChild 來(lái)從父組件類中訪問(wèn)指令、子組件和 DOM 元素,需要的朋友可以參考下
2024-08-08
詳解Angular結(jié)合zTree異步加載節(jié)點(diǎn)數(shù)據(jù)
本篇文章主要給大家分享了Angular結(jié)合zTree異步加載節(jié)點(diǎn)數(shù)據(jù)的難點(diǎn)以及方法，有這方面需求的朋友參考下吧。
2018-01-01