javascript - 如何在 Angular 4+ 中保存 blob 响应类型

Question

所以我调用一个 API，它返回我的 Angular 文件，如下所示:

getFile(fileInformation) {
  const req = new HttpRequest('POST', 'filedownload', fileInformation, { reportProgress: true, responseType: "blob" });
  return this.http.request(req);
}

在 API Controller 中(我按照 this SO top answer 来弄清楚这一步):

Public Function GetFile(fileInformation As FileDto) As HttpResponseMessage
    Dim filePath = Path.Combine(FileConstants.FilePath, fileInformation.FileType, fileInformation.FileName)
    Dim fileStream = New FileStream(filePath, FileMode.Open, FileAccess.Read)

    Dim result = new HttpResponseMessage(HttpStatusCode.OK)
    result.Content = New StreamContent(fileStream)
    result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream")

    Return result
End Function

此调用返回的结果为HttpResponse，主体为Blob类型。

HttpResponse: {
  blob: {
    size: 289940,
    type: "application/octet-stream"
  },
  headers: ...,
  status: 200,
  ...
}

现在如何在接收响应的 Angular 组件中触发此文件的下载？

Answer 1

安装FileSaver from npm .

npm install --save file-saver

将其导入到您拥有 blob 实例的类中

import * as FileSaver from 'file-saver';

然后调用

FileSaver.saveAs(blob, fileName);