c# - 下载文件时浏览器不显示进度条

Question

我有一个带有 ASP.NET Web API 的 Angular 应用程序。

我想下载存储在我的服务器上的文件。目前，这是我的代码:

[HttpGet]
[Route("downloadFile")]
[JwtAuthentication] //Only a connected user can download the file
public async Task<HttpResponseMessage> DownloadFile(string path)
{
    HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
    var fileStream = File.OpenRead(path);
    result.Content = new StreamContent(fileStream);
    result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
    result.Content.Headers.ContentLength = fileStream.Length;
    result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
    {
        FileName = fileStream.Name,
        Size = fileStream.Length
    };
    return result;
}

在我的 Angular 代码中:

// file-navigation.service.ts
downloadFile(file: FileElement) {
    const data = { path: this.formatPath(true) + file.name };
    return this.http.get(this.apiUrl + '/downloadFile', { params: data, responseType: 'blob' });
}

// file-navigation.component.ts
this.fileNavigationService.downloadFile(element).subscribe(result => {
    this.generateDownload(element, result, false);
});

generateDownload(element: FileElement, blob: Blob, isArchive: boolean) {
    const fileName = element != null ? element.name : 'Archive';
    if (navigator.appVersion.toString().indexOf('.NET') > 0) {
      window.navigator.msSaveBlob(blob, fileName + (isArchive ? '.zip' : ''));
    } else {
      const link = document.createElementNS(
        'http://www.w3.org/1999/xhtml',
        'a'
      );
      (link as any).href = URL.createObjectURL(blob);
      (link as any).download = fileName + (isArchive ? '.zip' : '');
      document.body.appendChild(link);
      link.click();
      setTimeout(function () {
          document.body.removeChild(link);
          link.remove();
      }, 100);
   }
}

有了这个，我成功地从服务器下载了一个文件。

但是，Chrome 中的下载栏仅在下载完成后才会出现。因此，如果文件太大，用户将不会获得任何指示当前正在下载其文件的指示符。

下面是正在下载的 16Mb 文件的屏幕截图。服务器当前正在发送数据，但未出现下载栏。



然后，一旦下载完成，文件就会出现在屏幕底部的下载栏中。



如何将文件发送到浏览器，以便向用户显示此指示器？

非常感谢你。

编辑:

正如@CodeCaster 指出的那样，重定向到 URL 可以工作，但是，我的 URL 受到保护，因此只有连接的用户才能下载文件。

Answer 1

在 Angular 方面，只需使用 anchor 标记并在 href 中传递 API URL属性。

<a href = {this.apiUrl + '/downloadFile' + '?' + 'your params'}>Download</a>

并且在流式传输数据之前的服务器端，请确保您已设置以下响应 header 。

res.setHeader('content-length',data.ContentLength)  (optional)
res.setHeader('content-type', mimetype);
res.setHeader('content-disposition', 'attachment; filename');