问题
I am downloading file using HTTP POST method. I want to call another method to show download progress to end user until file download complete.
How to use reportProgress in HttpClient for this.
downfile(file: any): Observable<any> {
return this.http.post(this.url , app, {
responseType: "blob", reportProgress: true, headers: new HttpHeaders(
{ 'Content-Type': 'application/json' },
)
});
}
回答1:
You need to use reportProgress: true to show some progress of any HTTP request. If you want to see all events, including the progress of transfers you need to use observe: 'events' option as well and return an Observable of type HttpEvent. Then you can catch all the events(DownloadProgress, Response..etc) in the component method.
Find more details in Angular Official Documentation.
downfile(file: any): Observable<HttpEvent<any>>{
return this.http.post(this.url , app, {
responseType: "blob", reportProgress: true, observe: "events", headers: new HttpHeaders(
{ 'Content-Type': 'application/json' },
)
});
}
Then in component you can catch all the events as below.
this.myService.downfile(file)
.subscribe(event => {
if (event.type === HttpEventType.DownloadProgress) {
console.log("download progress");
}
if (event.type === HttpEventType.Response) {
console.log("donwload completed");
}
});
Find HttpEventTypes Here.
回答2:
you will have to add HttpClientModule in your AppModule
you first need to build a request object by creating an instance of HttpRequest class and using reportProgress option.
For more information, please refer: https://alligator.io/angular/httpclient-intro/
来源：https://stackoverflow.com/questions/54896501/how-to-use-reportprogress-in-httpclient-in-angular