在 Angular 下载文件时无法获取进度和文件

Question

我有一个 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!');
      }
    });
}

我可以在我的控制台中清楚地看到进度，但是，我现在有 2 个问题：

我的代码从未进入最后一个 if，即使下载似乎已达到 100%
我的组件中的代码在 subscribe 方法上明显损坏

Property 'subscribe' does not exist on type 'Subscription'.

但我似乎无法找到一种方法来实现它，所以我可以获得进度和我的结果文件。

你有什么想法或例子可以帮助我解决这个问题吗？谢谢。

Answer 1

经过一些研究，我终于设法解决了我的问题，感谢。

现在这是我的服务代码：

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 下载文件时无法获取进度和文件

Trouble getting progress and file when downloading a file in Angular

observable

rxjs

angular

angular-httpclient