Angular利用HTTP POST下載流文件的步驟記錄
Angular / Vue HTTP POST下載流文件
HTTP POST 請(qǐng)求流文件轉(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異步請(qǐng)求，后臺(tái)返回的并不是下載地址，而是直接返回一個(gè)文件流，這時(shí)如何使用http請(qǐng)求回來的文件流轉(zhuǎn)換成文件下載？
其實(shí)并非Angular框架存地這樣的情況，其他PWA如Vue,React甚至Jquery都通過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)文章希望大家以后多多支持腳本之家！
- 解決angular的$http.post()提交數(shù)據(jù)時(shí)后臺(tái)接收不到參數(shù)值問題的方法
- 對(duì)比分析AngularJS中的$http.post與jQuery.post的區(qū)別
- Angularjs中$http以post請(qǐng)求通過消息體傳遞參數(shù)的實(shí)現(xiàn)方法
- 后端接收不到AngularJs中$http.post發(fā)送的數(shù)據(jù)原因分析及解決辦法
- AngularJS下$http服務(wù)Post方法傳遞json參數(shù)的實(shí)例
- AngularJS $http模塊POST請(qǐng)求實(shí)現(xiàn)
- AngularJS $http post 傳遞參數(shù)數(shù)據(jù)的方法
- angularJS 發(fā)起$http.post和$http.get請(qǐng)求的實(shí)現(xiàn)方法
- AngularJS封裝$http.post()實(shí)例詳解
- 深入理解Angularjs中$http.post與$.post
相關(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ù)的知識(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)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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)中。下面通過本文給大家分享使用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à)值，需要的朋友們下面來一起看看吧。2017-06-06
在 Angular 中使用 ViewChild 訪問子組件、指令或 D
這篇文章主要介紹了如何在 Angular 中使用 ViewChild 來訪問子組件、指令或 DOM 元素,在本教程中,您使用了 ViewChild 來從父組件類中訪問指令、子組件和 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