下载文件时浏览器不显示进度栏

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端，只需使用定位标记并在href属性中传递API URL。

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

以及在服务器端传输数据之前，请确保已设置以下响应标头。

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