我有一个 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%
- The code in my component is obviously broken on the subscribe method
“订阅”类型上不存在属性“订阅”。
但我似乎无法找到一种方法来使其有效,以便我可以获得进度和结果文件。
您有什么想法或例子可以帮助我吗?谢谢。
经过一番研究,我终于成功解决了我的问题,感谢这个答案 https://stackoverflow.com/a/54899930.
现在这是我的服务代码:
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);
}
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)