angular - 浏览器中文件下载进度 : Angular 5

Question

我正在创建一个使用 REST API 来下载文件的应用程序。当你点击它时，api 会立即返回文件。所以我使用以下逻辑来获取文件:

downloadFile(file) {
  this.service.downloadFile(file.id).subscribe((fileData) => {
  const a = document.createElement('a');
  document.body.appendChild(a);
  const blob = new Blob([data], { type: data.type });
  const url = window.URL.createObjectURL(blob);
  a.href = url;
  a.download = file.name;
  a.click();
  window.URL.revokeObjectURL(url);
  });
}

以上代码完美运行。但是，当整个文件下载完成时，它会在浏览器中下载文件，也就是说，您不会在浏览器中看到文件下载的进度(我们通常在 Chrome 中下载文件时通常会看到这种情况)。您可以在控制台的“网络”选项卡中看到它正在下载文件，但仅在下载整个文件时才会显示。任何人都可以告诉我如何强制它在浏览器中下载以显示进度吗？

Answer 1

要实现此解决方案，我们需要 API 中的总文件大小值。您还需要使用支持进度条事件的 HTTPClientModule。