Angular集成PSPDFKit库时CSS选择器报错，无法预览DOCX文件

报错核心原因 #

• 你HTML中的#pdfContainer是Angular模板引用变量，并非HTML元素的id属性，因此CSS选择器#pdfContainer无法匹配到该元素，导致PSPDFKit找不到指定容器。
• 另外，若在DOM尚未完全渲染完成时调用PSPDFKit.load()，即使选择器正确，也会因元素未挂载到DOM中而触发该错误。

解决方法 #

方法1：将模板变量改为元素ID #

修改HTML，给容器添加id属性：

<div class="pdf-viewer">
    <div id="pdfContainer" style="width: 100%; height: 100vh"></div>
</div>

在Angular组件的ngAfterViewInit钩子中调用PSPDFKit（确保DOM已加载完成）：

import { AfterViewInit, Component } from '@angular/core';

@Component({
  // 你的组件元数据（如selector、templateUrl等）
})
export class DocumentViewerComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    PSPDFKit.load({
      container: '#pdfContainer',
      document: candidateDocumentUrl,
    });
  }
}

方法2：使用ViewChild获取模板引用元素 #

保留原HTML的模板变量，通过Angular的ViewChild直接获取DOM元素：

<div class="pdf-viewer">
    <div #pdfContainer style="width: 100%; height: 100vh"></div>
</div>

修改TS代码，在ngAfterViewInit中传入获取到的元素：

import { AfterViewInit, Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class DocumentViewerComponent implements AfterViewInit {
  @ViewChild('pdfContainer') pdfContainer!: ElementRef<HTMLElement>;

  ngAfterViewInit(): void {
    PSPDFKit.load({
      container: this.pdfContainer.nativeElement,
      document: candidateDocumentUrl,
    });
  }
}

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