使用 REST API 和瀏覽器的下載管理器下載大文件

Question

我們在 Angular 前端應用程序中遇到了一個小問題——我們的客戶想要下載報告。 生成報告后，我們將使用具有關鍵標頭的 GET 端點，例如access-control-expose-headers: content-disposition和content-disposition: attachment; filename=TasksReport-28-10-2022.xlsx; filename*=UTF-8''Report.xlsx content-disposition: attachment; filename=TasksReport-28-10-2022.xlsx; filename*=UTF-8''Report.xlsx 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,
      })
...

所以你可以建立你的一個下載進度 window 等等。

問候，弗洛里安