我有一个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
“预订”类型上不存在“预订”属性。
但是我似乎找不到找到使之可行的方法,因此我可以获得进度和结果文件。
您有什么想法或例子可以帮助我吗?谢谢。
答案 0 :(得分:0)
经过研究,终于有了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);
}
});