时间戳

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

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

问题描述

我正在开发一个 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' });

标签： angulartypescriptnpmblobfilesaver.js

解决方案

代替

 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，并在客户端读取它

有关内容处置以及您可能需要它的原因的更多信息，请参见此处

推荐阅读