无法在“URL”上执行“createObjectURL”：使用 npm 文件保护程序进行重载解析失败答案

【问题标题】：Getting Failed to execute 'createObjectURL' on 'URL': Overload resolution failed with npm file-saver无法在“URL”上执行“createObjectURL”：使用 npm 文件保护程序进行重载解析失败
【发布时间】：2021-04-08 23:58:07
【问题描述】：

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

我已成功上传并将其保存到我的数据库中，并且我还能够在客户端结果中以字节 [] 的形式获取其数据。

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

GET 调用 API 后，我的结果的控制台输出如下所示

并使用此代码保存

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

我用 result.blob 进行了尝试，但仍然没有运气。有什么想法吗？

在我看到的一些帖子中

它刚刚从当前版本的 Chrome 中删除那么我该如何克服呢？

更新

我做了两件事

我将打字稿代码更改为

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

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

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

请查看我的请求标头

   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' });

【问题讨论】：

我想看看你在从服务器请求 pdf 时传递的标题，你能发布获取请求的代码和标题
嗨，nobal，请查看我更新后的带有请求标头的问题

标签： angular typescript npm blob filesaver.js

【解决方案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 文件，为了获取文件名，您可能需要在后端为响应标头添加一个称为 content-dispostion 的标签，并在客户端读取它

请参阅此处了解更多关于 content-disposition 以及您可能需要它的原因

【讨论】：

Nobal blob.body 错过了这个问题，所以在我们的应用程序中，我们使用两种类型的文档，一种是 word 文档，另一种是 pdf。因此，在这种情况下，当我们使用上述方法将 .doc 文档下载为 pdf 时，会导致任何问题，例如格式问题吗？还是我需要像我们刚才处理 pdf 一样处理它？
是的，它会导致问题，因为正如您在函数中看到的那样，现在每个文件都保存为 xyz_resume.pdf，因此您需要使这个东西动态化。在响应 getFile 请求时，您必须在 content-disposition 标头中传递来自服务器的文件的完整名称（我已在答案中粘贴了链接），并在客户端的 saveAs(blob.body,fileName) 中设置该名称侧面....
好的 Nobal 我会尝试这种方式，谢谢您的帮助
Nobel 如果我想检索我的类对象，我得到了我的打字稿，结果，我有字节数组，文件名和文件类型，所以在这种情况下进行下载 // var文件名 = 简历.resumeName; // var fileType = resume.resumeType; // const file = new Blob([resume.Resume], { type: fileType }); //另存为（文件，文件名）；它会起作用吗？
我尝试了上述方法，但 pdf 无法正确生成，对此有何想法？

【解决方案2】：

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

 (failed) net::ERR_RESPONSE_HEADERS_MULTIPLE_CONTENT_DISPOSITION

然后触发了：

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

【讨论】：