ng2-pdf-viewer模态框中报错：Cannot read properties of undefined (reading 'vertical')

问题原因 #

这个错误是因为PDF渲染时，模态框的DOM元素还未完全加载或处于不可见状态，导致ng2-pdf-viewer无法正确初始化PDFJS的视图配置，进而触发vertical属性读取失败。

具体解决步骤 #

• 延迟加载PDF资源
  不要在模态框初始化时直接绑定PDF源，等模态框完全显示后再加载。以Angular Material的MatDialog为例：

  openPdfModal() {
    const dialogRef = this.dialog.open(PdfViewerModalComponent);
    dialogRef.afterOpened().subscribe(() => {
      // 模态框完全打开后设置PDF源
      this.pdfSrc = 'path/to/your/target.pdf';
    });
  }
  

  模板中添加条件渲染确保DOM就绪后再加载组件：

  <pdf-viewer *ngIf="pdfSrc" [src]="pdfSrc" [render-text]="true"></pdf-viewer>
  

• 手动触发PDF重新渲染
  若需提前设置PDF源，可在模态框显示后调用组件的refresh()方法。先给pdf-viewer添加模板引用：

  <pdf-viewer #pdfViewer [src]="pdfSrc"></pdf-viewer>
  

  再在组件中获取引用并执行刷新：

  import { ViewChild } from '@angular/core';
  import { PdfViewerComponent } from 'ng2-pdf-viewer';
  
  @ViewChild('pdfViewer') pdfViewer!: PdfViewerComponent;
  
  openPdfModal() {
    const dialogRef = this.dialog.open(PdfViewerModalComponent);
    dialogRef.afterOpened().subscribe(() => {
      setTimeout(() => {
        this.pdfViewer.refresh();
      }, 100); // 短延迟确保DOM状态稳定
    });
  }
  

• 排查配置项冲突
  暂时关闭非必要的配置项（比如[render-text]="false"），验证是否是配置干扰了视图初始化，再逐步恢复配置定位问题。

• 升级依赖补丁版本
  尝试升级到同大版本的最新补丁版，修复已知bug：

  npm install ng2-pdf-viewer@^7.0.3 --save
  

内容的提问来源于stack exchange，提问作者Jerin Easo Regi