如何在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控制器中(我按照这个SO的最佳答案来说明这一步):

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,而body是类型Blob.

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

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

Answer 1

从npm安装FileSaver.

npm install --save file-saver

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

import * as FileSaver from 'file-saver';

然后打电话

FileSaver.saveAs(blob, fileName);

Answer 2

正如 @Jason Spradlin 指出的，您可以使用 FileSaver包

还有另一个包来保存文件：

npm install @progress/kendo-file-saver --save

用法：

import { saveAs } from '@progress/kendo-file-saver'

saveAs(data: string | Blob, fileName: string, options?: SaveOptions)

1-数据是base64

const result = `data:${YOUR_MIME_TYPE};base64,` + YOUR_DATA;
saveAs(result, YOUR_FILE_NAME);

2-数据是 Blob

saveAs(YOUR_DATA, YOUR_FILE_NAME);

手动：

const file = new window.Blob([data], { type: contentType });

const downloadAncher = document.createElement("a");
downloadAncher.style.display = "none";

const fileURL = URL.createObjectURL(file);
downloadAncher.href = fileURL;
downloadAncher.download = fileName;
downloadAncher.click();