在 Angular 中下载文件时无法获取进度和文件 [英] Trouble getting progress and file when downloading a file in Angular
问题描述
我有一个 Angular 应用程序,我只想下载一个文件.
到目前为止,这是我的代码:
this.fileNavigationService.downloadFile(element).subscribe(result => {this.generateDownload(result);});
还有我的服务:
downloadFile(file: FileElement) {return this.http.get(this.apiUrl + '/downloadFile', { params: file.name, responseType: 'blob' });}
现在,我想在下载文件时显示进度.在网上查了一下,发现了一个很有用的东西.我的服务现在看起来像这样:
downloadFile(file: FileElement) {const req = new HttpRequest('GET', '/downloadFile?path=' + file.name, {报告进度:真,});返回 this.http.request(req).subscribe(event => {if (event.type === HttpEventType.DownloadProgress) {const percentDone = Math.round(100 * event.loaded/event.total);console.log(`文件已下载 ${percentDone}%.`);} else if(HttpResponse的事件实例){console.log('文件下载完毕!');}});}
我可以在控制台中清楚地看到进度,但是,我现在有两个问题:
- 我的代码永远不会进入最后一个
if
即使下载似乎达到了 100% - 我的组件中的代码在 subscribe 方法上明显被破坏了<块引用>
订阅"类型不存在订阅"属性.
但我似乎无法找到一种方法来使其有效,因此我可以获得进展和我的结果文件.
你有什么想法或例子可以帮助我解决这个问题吗?谢谢.
经过一番研究,我终于通过 这个答案解决了我的问题.
这是我的服务代码:
downloadFile(file: FileElement) {返回 this.http.get(this.apiUrl + '/downloadFile',{参数:文件名,responseType: 'blob',报告进度:真,观察:'事件',标头:新 HttpHeaders({ 'Content-Type': 'application/json' })});}
在我的组件中:
this.fileNavigationService.downloadFile(element).subscribe(result => {if (result.type === HttpEventType.DownloadProgress) {const percentDone = Math.round(100 * result.loaded/result.total);控制台日志(完成百分比);}if (result.type === HttpEventType.Response) {this.generateDownload(result.body);}});
I have an Angular application where I just want to download a file.
Up until now, this was my code:
this.fileNavigationService.downloadFile(element).subscribe(result => {
this.generateDownload(result);
});
And my service:
downloadFile(file: FileElement) {
return this.http.get(this.apiUrl + '/downloadFile', { params: file.name, responseType: 'blob' });
}
Now, I wanted to show the progression when I download a file. After looking up online, I came across something quite useful. My service now looks like this:
downloadFile(file: FileElement) {
const req = new HttpRequest('GET', '/downloadFile?path=' + file.name, {
reportProgress: true,
});
return this.http.request(req).subscribe(event => {
if (event.type === HttpEventType.DownloadProgress) {
const percentDone = Math.round(100 * event.loaded / event.total);
console.log(`File is ${percentDone}% downloaded.`);
} else if (event instanceof HttpResponse) {
console.log('File is completely downloaded!');
}
});
}
I can clearly see in my console the progress, however, I have now 2 problems:
- My code never goes into the last
if
even though the download appears to reach 100% - The code in my component is obviously broken on the subscribe method
Property 'subscribe' does not exist on type 'Subscription'.
But I can't seem to find a way to make this works so I can get the progression and my result file.
Do you have any idea or examples to help me on this? Thanks.
After some research, I finally managed to solve my issue thanks to this answer.
This is now my service code:
downloadFile(file: FileElement) {
return this.http.get(
this.apiUrl + '/downloadFile',
{
params: file.name,
responseType: 'blob',
reportProgress: true,
observe: 'events',
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
}
);
}
And in my component:
this.fileNavigationService.downloadFile(element).subscribe(result => {
if (result.type === HttpEventType.DownloadProgress) {
const percentDone = Math.round(100 * result.loaded / result.total);
console.log(percentDone);
}
if (result.type === HttpEventType.Response) {
this.generateDownload(result.body);
}
});
这篇关于在 Angular 中下载文件时无法获取进度和文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!