ngx-extended-pdf-viewer无法同时打开多个实例的问题如何解决？

该问题由ngx-extended-pdf-viewer默认共享全局PDF.js worker实例、容器ID冲突导致，后加载的实例会抢占先加载实例的渲染资源，出现覆盖、空白问题。

1. 给每个PDF组件分配唯一ID #

两个PDF实例必须设置不同的id属性，避免DOM节点绑定冲突：

<!-- 主页面PDF实例 -->
<ngx-extended-pdf-viewer
  id="main-page-pdf"
  [src]="mainPdfUrl"
  height="100%"
>
</ngx-extended-pdf-viewer>

<!-- 弹窗内PDF实例，仅弹窗打开时渲染 -->
<div *ngIf="isModalVisible" class="modal-container">
  <ngx-extended-pdf-viewer
    id="modal-pdf"
    [src]="modalPdfUrl"
    height="600px"
  >
  </ngx-extended-pdf-viewer>
</div>

2. 开启多实例支持配置 #

全局配置（推荐） #

在app.module.ts的模块导入阶段开启多实例支持，允许同时存在多个独立的PDF渲染实例：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxExtendedPdfViewerModule.forRoot({
      enableMultipleInstances: true // 开启多实例支持
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

组件属性配置 #

如果是低版本不支持全局配置，可以给两个PDF组件都加上[enableMultipleInstances]="true"属性：

<ngx-extended-pdf-viewer
  id="main-page-pdf"
  [src]="mainPdfUrl"
  [enableMultipleInstances]="true"
  height="100%"
>
</ngx-extended-pdf-viewer>

3. 优化弹窗内实例的加载时机 #

弹窗内的PDF组件用*ngIf控制渲染，仅弹窗打开时才初始化实例，关闭弹窗时自动销毁实例释放资源，避免同时初始化两个实例导致的资源抢占。

排查注意事项 #

• 确认两个PDF实例绑定的src为独立变量，没有出现引用错误导致两个组件加载同一份PDF
• 不要手动修改PDF.js全局配置，避免破坏多实例隔离逻辑

内容的提问来源于stack exchange，提问作者user3564904