Angular 19 + ngx-extended-pdf-viewer动态加载PDF渲染失败，但静态路径可正常显示

我遇到过类似的问题，结合ngx-extended-pdf-viewer的工作机制和Angular的特性，帮你梳理一下可能的原因和解决办法：

1. Blob的MIME类型未正确设置 #

静态加载时，浏览器会根据文件后缀自动识别MIME类型为application/pdf，但动态通过HTTP获取Blob时，如果后端返回的响应头Content-Type不正确，或者前端没有显式指定Blob的MIME类型，PDF.js可能无法正确解析文件结构，抛出类似"Invalid Root reference"的错误。

解决办法：

• 后端确保返回的响应头Content-Type严格设置为application/pdf
• 前端获取Blob后，重新构造带正确MIME类型的Blob：

webApi.getFile().subscribe((res) => {
  // 显式指定MIME类型为application/pdf
  const pdfBlob = new Blob([res], { type: 'application/pdf' });
  this.src = pdfBlob;
});

2. OnPush变更检测的时机问题 #

你的组件使用了ChangeDetectionStrategy.OnPush，当你直接赋值this.src = res时，Angular可能无法自动检测到状态变化，导致PDF viewer要么没有更新，要么在Blob未完全准备好时就尝试解析，引发错误。

解决办法：

方案A：手动触发变更检测 #

先注入ChangeDetectorRef，然后在赋值后标记需要检测变更：

import { ChangeDetectorRef } from '@angular/core';

// 组件构造函数注入
constructor(private cdr: ChangeDetectorRef, ...) {}

// 订阅中修改
webApi.getFile().subscribe((res) => {
  const pdfBlob = new Blob([res], { type: 'application/pdf' });
  this.src = pdfBlob;
  // 通知Angular检测变更
  this.cdr.markForCheck();
});

方案B：用async管道替代手动订阅（推荐） #

async管道会自动处理订阅、取消订阅和变更检测，更符合Angular响应式最佳实践：

import { Observable, map } from 'rxjs';

// 组件内定义可观察对象
public src$: Observable<Blob> = this.webApi.getFile().pipe(
  map(res => new Blob([res], { type: 'application/pdf' }))
);

模板中使用async管道绑定：

<ngx-extended-pdf-viewer [src]="src$ | async" 
                         [textLayer]="true" 
                         [showHandToolButton]="true" 
                         [showPrintButton]="false">
</ngx-extended-pdf-viewer>

3. PDF viewer内部状态残留问题 #

当从静态路径切换到动态Blob时，ngx-extended-pdf-viewer的内部状态可能没有完全重置，导致PDF.js解析时出现冲突。

解决办法：
在赋值新Blob前，先清空src并触发变更检测，给viewer足够的重置时间：

webApi.getFile().subscribe((res) => {
  // 先清空src，触发viewer重置
  this.src = '';
  this.cdr.markForCheck();
  // 短暂延迟后设置新的Blob
  setTimeout(() => {
    const pdfBlob = new Blob([res], { type: 'application/pdf' });
    this.src = pdfBlob;
    this.cdr.markForCheck();
  }, 100);
});

4. HTTP请求的响应格式问题 #

有时候直接获取Blob可能会出现数据损坏，改用ArrayBuffer获取后再转Blob会更可靠：
修改你的getFile()方法：

public getFile(): Observable<Blob> {
  return this.httpClient.get('/assets/ESD Nederlandrev.pdf', {
    responseType: 'arraybuffer' // 先获取ArrayBuffer
  }).pipe(
    map(buffer => new Blob([buffer], { type: 'application/pdf' }))
  );
}

总结 #

优先尝试async管道+显式指定MIME类型的组合方案，这既能避免手动订阅的时机问题，又能确保PDF.js正确识别文件类型。如果还是有问题，可以结合变更检测手动触发和ArrayBuffer转Blob的方式来排查。

内容来源于stack exchange