无法在 'URL' 上执行 'createObjectURL'：npm file-saver 导致重载解析失败

Question

我正在开发一个 angular 应用程序来下载使用我的 angular 应用程序作为 word 文档上传到我本地计算机的用户详细信息。

我能够成功上传它并将其保存到我的数据库中，而且我还能够在我的客户端结果中将其数据作为 byte[] 获取。

我在我的 angular 应用程序中使用 npm i file-saver 在客户端计算机中执行保存。但是当我尝试这样做时，我在控制台中收到此错误

在 GET 调用 API

之后，我的结果控制台输出如下所示

并使用此代码保存

   saveAs(result, name+'_resume.pdf');

我用 result.blob 试过了，但还是不行。伙计们有什么想法吗？

在一些post中我看到了

它刚刚从 Chrome 的当前版本中删除，我该如何克服这个问题？

更新

我做了两件事

我将打字稿代码更改为

    this.dataservice.getResume(method, id).subscribe(blob => {
    const file = new Blob([blob], { type: 'application/pdf' });

    saveAs(file, name+'_resume.pdf');

现在文件正在以 .pdf 格式下载。但是当我尝试打开文件时，我遇到加载失败错误：/

请看我的请求header

   let headers = new HttpHeaders()
  .set('Authorization', 'Bearer ' +
    this.securityService
      .securityObject.bearerToken);

   return this.http.get(environment.baseApiUrl + methodName + id, { headers: headers , observe: 'response', responseType: 'blob' });

Answer 1

替换

 this.dataservice.getResume(method, id).subscribe(blob => {
    const file = new Blob([blob], { type: 'application/pdf' });

    saveAs(file, name+'_resume.pdf');

与

 this.dataservice.getResume(method, id).subscribe(blob => {
   saveAs(blob.body, name+'_resume.pdf');
  }

接下来的步骤：

以上代码仅适用于 pdf 文件，为了获取文件名，您可能必须在后端添加一个标签以响应 headers 称为 content-dispostion，然后阅读在您的客户端

有关 content-disposition 的更多信息以及您可能需要它的原因，请参阅此处

Answer 2

不确定这对这个问题有多大影响。但是在我的例子中，pdf 的名称有时会包含非法字符，特别是逗号，这会导致 api 调用失败，状态为：

 (failed) net::ERR_RESPONSE_HEADERS_MULTIPLE_CONTENT_DISPOSITION

然后触发了：

Failed to execute 'createObjectURL' on 'URL': Overload resolution...

无法在 'URL' 上执行 'createObjectURL'：npm file-saver 导致重载解析失败

Getting Failed to execute 'createObjectURL' on 'URL': Overload resolution failed with npm file-saver

angular

typescript

npm

blob

filesaver.js