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

编程问答 2022-06-01

问题描述

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

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

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

enter image description here

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

enter image description here

并使用此代码保存

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

解决方法

替换

 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 的更多信息以及您可能需要它的原因

,

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

 (failed) net::ERR_RESPONSE_HEADERS_MULTIPLE_CONTENT_DISPOSITION

然后触发：

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