我有一个 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, {
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!');
}
});
}
我可以在控制台中清楚地看到进度,但是,我现在有两个问题:
if
即使下载似乎达到 100% Property 'subscribe' does not exist on type 'Subscription'.
但我似乎无法找到一种方法来使这个工作,所以我可以得到进展和我的结果文件。
你有什么想法或例子可以帮助我吗?谢谢。
最佳答案
经过一番研究,我终于设法解决了我的问题,感谢 this answer .
这是现在我的服务代码:
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' })
}
);
}
在我的组件中:
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 - 在 Angular 中下载文件时无法获取进度和文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55518038/