angular - 使用 REST API 和浏览器的下载管理器下载大文件

Question

我们在 Angular 前端应用程序中面临一个小问题 - 我们的客户想要下载报告。生成报告后，我们将使用具有关键 header 的 GET 端点，例如 access-control-expose-headers: content-disposition和content-disposition: attachment; filename=TasksReport-28-10-2022.xlsx; filename*=UTF-8''Report.xlsx 。该部分工作正常，正在下载文件。当文件较大(~150MB)时问题就开始了，我们必须等待响应。我为此使用繁忙指示器，但客户希望像“常规文件”一样下载 - 因此希望在浏览器的下载管理器中看到完整进度。

现在我们有“长”请求，之后文件立即保存在硬盘上:

但我们想要实现类似于直接按文件下载链接的效果:

我们正在考虑只提供文件的直接 URI，但我认为这不是最好的方法，对吗？我们如何设置 API 或 UI 来实现这一目标？感谢您的帮助，如果需要更多信息，我很乐意编辑问题并提供。

Answer 1

Google Drive 的方式如下:

1. 您的文件将被打包。
2. Google 发送带有打包文件名的响应(例如:.com/a8jek8-djfl8-dfle-fj393f)
3. 客户端(浏览器应用程序)调用链接，浏览器下载开始。像这样:

  downloadURI(uri: string, name: string) {
    var link = document.createElement('a');
    link.download = 'name';
    link.href = uri;
    link.setAttribute('target', '_blank');
    link.click();
    link.remove();
  }

第二种方式:您可以在获取请求中使用 reportProgress 选项

this.httpClient.get<any>(environment.backendUrl + '/your-path', {
        observe: 'events',
        reportProgress: true,
      })
...

因此您可以构建一个下载进度窗口等等。

你好，弗洛里安