使用 FileSaver 下载文件答案

【问题标题】：Downloading file with FileSaver使用 FileSaver 下载文件
【发布时间】：2019-11-21 16:24:24
【问题描述】：

我想使用 FileSaver 从我的 Rest API 下载文件。在 Content-Disposition 的响应标题中，我有文件名。如何以角度读取标题？当我这样设置我的服务时：

getPdf() {
return this.httpClient.get(this.url, {responseType: 'blob'}); }

我可以毫无问题地下载文件，但是当我想另外设置 {observe: 'response'} 以读取选项中的标题时，我的浏览器出现错误。

ERROR TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
at saveAs (FileSaver.js:112)

我的文件保存功能：

this.packageService.getPdf().subscribe(
  pdf => {
     saveAs(pdf);
  }
);

我在后端添加了 Access-Control-Expose-Headers，只有当我添加 {observe} 时才会出现错误，因此我无法找到解决方案。

【问题讨论】：

在您的后端，您要访问的网址是什么？现在你正在尝试做类似localhost:8080/url 的事情，因为你传入的是'url' ant 而不是this.url。另外，你检查过这个答案stackoverflow.com/a/33759534/8947748
对不起我的错误，有this.url，我的url是localhost:8080/packages/{id}/raport，但是没有问题，因为我的问题显示当我想读取标题时与{观察}。没有它，文件可以正常下载。

标签： angular rest

【解决方案1】：

我认为问题在于，当您请求响应时，不仅仅是数据。因此，当您尝试将其直接传递给文件保护程序时，它会引发异常。

我认为这可能有效？

this.packageService.getPdf().subscribe(
  response => {
     saveAs(response.body);
  }
);

【讨论】：

没有 response.body（Blob 类型上不存在属性）。我编写的这段代码正在运行并且文件正在下载，但我无法从响应中获取标题。当我在我的服务中添加 {observe: 'response'} 时显示此错误。没有它一切都很好。
我不确定是什么问题，因为我无法复制确切的问题。但是当我像这样设置我的 get 方法时，我可以读取标题：getPdf() { return this.httpClient.get(url, { observe: "response", responseType: "blob"}); }
还有这个答案stackoverflow.com/a/50887300/10934321
好的，我发现一个错误。我从 'file-saver/dist/FileSaver' 而不是从 'file-saver' 导入 saveAs，这会产生错误...谢谢您的帮助。