在我开始使用Angular 17版本并推荐使用with Fetch之后,搜索BLOB的GET方法停止工作. 如果您不使用WITH Fetch,PDF将在我的模板的IFRAME内正常打开. 注意:编译期间或运行时不会显示任何错误.PDF显示有错误的内容,显示奇怪的文本和字符. 下面的代码中有什么错误?会不会是个窃听器?

App.config.ts

export const appConfig: ApplicationConfig = {
    providers: [
        provideRouter(routes),
        provideHttpClient(
            withInterceptorsFromDi(),
            withFetch()
        ),   
...
}

Services.ts

public downloadDiagrammedPdf(sumarioId: number, nomeDoDiagramaPDF: string): Observable<HttpEvent<Blob>> {
    return this.http.request(
      new HttpRequest('GET', `${this.apiDownloadPdfUrl}?sumarioId=${sumarioId}&nomeDoDiagramaPDF=${nomeDoDiagramaPDF}`, null, {
        reportProgress: true,
        responseType: 'blob',
      })
    );
  }

ShowPdf.componente.ts

downloadFile(sumarioId: number, nomeDoDiagramaPDF: string): void {
    this.serviceUpDown.downloadDiagrammedPdf(sumarioId, nomeDoDiagramaPDF).subscribe({
      next: (data) => {
        switch (data.type) {
          case HttpEventType.DownloadProgress:
            break;
          case HttpEventType.Response:
            //this.downloadStatus.emit({ status: ProgressStatusEnum.COMPLETE });
            const file = new Blob([data.body as BlobPart], {
              type: data.body?.type,
            });
            this.createPdfFromBlob(file);
            break;
        }
      },
      error: (err) => {
        //this.downloadStatus.emit({ status: ProgressStatusEnum.ERROR });
        if (err.status == 404) {
          this.router.navigate(['app-error-page']);
        }
        else
          console.log(err);

      },
      complete: () => { }
    });
  }

  createPdfFromBlob(file: Blob) {
    this.pdfSrc = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(file));
  }

版本:

{
    "@angular/animations": "^17.0.2",
    "@angular/cdk": "^17.0.0",
    "@angular/common": "^17.0.2",
    "@angular/compiler": "^17.0.2",
    "@angular/core": "^17.0.2",
    "@angular/forms": "^17.0.2",
    "@angular/material": "^17.0.0",
    "@angular/platform-browser": "^17.0.2",
    "@angular/platform-browser-dynamic": "^17.0.2",
    "@angular/platform-server": "^17.0.2",
    "@angular/router": "^17.0.2",
    "@angular/ssr": "^17.0.0",
    "@auth0/angular-jwt": "^5.1.2",
    "@material/icon-button": "^15.0.0-canary.684e33d25.0",
    "angular-imask": "^7.1.3",
    "express": "^4.15.2",
    "ngx-toastr": "^17.0.2",
    "rxjs": "~7.8.1",
    "tslib": "^2.6.2",
    "zone.js": "~0.14.2"
  }

推荐答案

这确实是一个错误,BLOB中缺少MIME类型.

在解决问题之前,您可以通过自己在斑点上设置type来解决此问题!

  createPdfFromBlob(file: Blob) {
    file = file.slice(0, file.size, "application/pdf")
    this.pdfSrc = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(file));
  }

PR to Track:https://github.com/angular/angular/pull/52840

Angular相关问答推荐

Angular前端调用ALB身份验证后的后端并重定向

我如何更新此Ionic应用程序以解决路由问题?

PrimeNg选项卡视图选项卡

如何防止打印后的空格后的HTML元素的Angular ?

Angular NG5002错误无效的ICU消息和意外字符EOF

合并Cypress和Karma的代码覆盖率报告JSON文件不会产生正确的结果

根据环境变量动态加载Angular templateUrl

NX MFE Angular 模块联合无法访问远程微前端

当我ng serve时,Angular CLI 提示TypeError: callbacks[i] is not a function

如何在 cypress 测试中实现拖放?

如何从表单组中禁用的表单控件中获取值?

类继承支持

如何使用ngrx和effects 订阅成功回调

如何在 Angular Cli 中生成 .angular-cli.json 文件?

Angular 2 Material - 如何居中进度微调器

使用 DomSanitizer 绕过安全性后,安全值必须使用 [property]=binding

Angular 2 http 没有得到

unexpected token < 错误

Angular2 - 从外部验证和提交表单

Angular ngClass 和单击事件以切换类