Angular 5/6：从ASP.NET Core API HTTP处理文件下载（具有友好文件名）

Question

我目前有一个ASP.NET Core 2.1 APIendpoint，用户可以点击该endpoint下载CSV文件：

[HttpPost("Gimme")]
public IActionResult Gimme([FromBody] MyOptions options)
{
    MemoryStream reportStream = _reportGenerator.GenerateReportStream(options.StartDate, options.EndDate);

    return new FileStreamResult(reportStream, "text/csv") { FileDownloadName = "report.csv" };
}

我可以通过邮递员测试它，它返回一个CSV与正确的数据，没有问题。

输入Angular。我们与API交互的web站点使用一个角度驱动的单页应用程序。我已经搜索了关于如何处理来自APIendpoint的文件的各种方法，其中很多似乎都围绕着获取一个Blob并创建一个内联URL，然后通过JavaScript中的window.open()导航到该URL。或者创建内存中的A标记，然后调用click()。

我的问题是：最新的Angular真的没有办法解决这个问题吗？我不是什么角度的专家，但我认为他们的网站上会有一个例子，或者一些内置的机制来向浏览器提供下载的文件。然而，这似乎涉及到很多黑客行为。

我当前的WIP解决方案确实会将文件返回到浏览器进行下载，但不管API中指定的文件名如何，它都是作为临时文件名（某种类似GUID的东西）下载的：

下面是我的组件类和服务类中的内容。我更新了downloadfile()方法，以使用此SO答案中提供的答案来使友好的文件名工作，但我仍然希望找到一个不那么复杂的解决方案。

// Component

DownloadReport(options: ReportOptions) {
    this._service.getCSV(options).subscribe(data => this.downloadFile(data));
}

downloadFile(blob: Blob) {
    const fileName = 'report.csv';
    if (navigator.msSaveBlob) {
        // IE 10+
        navigator.msSaveBlob(blob, fileName);
    } else {
        const link = document.createElement('a');
        const url = URL.createObjectURL(blob);
        link.setAttribute('href', url);
        link.setAttribute('download', fileName);
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
    }
}

// Service

getCSV(reportOptions: ReportOptions): Observable<any> {
    let headers = new HttpHeaders();
    headers = headers.set('Accept', 'text/csv');
    return this._httpClient
        .post(`${this.apiRoot}/Gimme`, reportOptions, { headers: headers, responseType: 'blob' })
        .catch(this.handleError);
}

正如您所看到的，我目前正在实现createobjecturlhack来使其工作（一个在Internet上找到的解决方案的混合）。有更好的办法吗？“最佳实践”之类的方式？

Answer 1

这就是我用的。它基本上是一样的东西，你正在使用，但看起来更干净一点，我与锚键入。我研究了很长一段时间的正确的方法来做到这一点，但找不到一个非骇客的方法来做到这一点。

  download(): void {
    this.service.getFile({ id: id, name: name })
      .subscribe(data => {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          //save file for IE
          window.navigator.msSaveOrOpenBlob(data, name);
        } else {
          const objectUrl: string = URL.createObjectURL(data);
          const a: HTMLAnchorElement = document.createElement('a') as HTMLAnchorElement;

          a.href = objectUrl;
          a.download = name;
          document.body.appendChild(a);
          a.click();

          document.body.removeChild(a);
          URL.revokeObjectURL(objectUrl);
        }
      });
  }