ng2-pdfjs-viewer库onDocumentLoad事件未触发问题排查求助

排查&解决步骤 #

• 先验证库版本和全屏模式的bug：ng2-pdfjs-viewer 6.0.0及更早版本存在全屏模式下message监听漏绑定的问题，你可以先把模板中的[fullScreen]=true改为false测试onDocumentLoad是否能正常触发。如果关闭全屏后事件恢复，可通过以下两种方式修复：
  1. 升级库到7.0.0及以上正式版本
  2. 不改版本的前提下，在当前组件的ngAfterViewInit生命周期手动给iframe补加message监听，绑定到组件自带的receiveMessage方法即可
• 检查pdfSrc赋值时机：如果你的attachment.pdfName是通过接口异步获取的，要保证在给pdfSrc赋值前，ng2-pdfjs-viewer组件已经完成初始化、输出事件已经绑定完成，不要用*ngIf动态控制组件加载后再赋值pdfSrc，容易导致事件监听漏绑。
• 验证pdfjs viewer文件完整性：如果你的项目中自行替换过pdfjs的viewer.html/viewer.js文件，要确认文件中保留了pagesloaded事件触发时的postMessage逻辑，很多自定义修改过的viewer会删除这部分跨上下文通信的代码，导致外层组件收不到事件通知。

临时兼容方案 #

如果以上排查都没有定位到问题，可以直接绕过组件的封装，直接监听pdfjs原生的加载完成事件，代码示例如下：

import { ViewChild } from '@angular/core';
import { Ng2PdfjsViewerComponent } from 'ng2-pdfjs-viewer';

export class YourComponent {
  @ViewChild('externalPdfViewer', { static: false }) pdfViewer: Ng2PdfjsViewerComponent;

  ngAfterViewInit() {
    // 轮询获取pdfjs实例，直到加载完成
    const checkPdfLoaded = setInterval(() => {
      const iframeWindow = this.pdfViewer['iframe']?.nativeElement?.contentWindow;
      if (iframeWindow?.PDFViewerApplication?.eventBus) {
        clearInterval(checkPdfLoaded);
        // 绑定原生pagesloaded事件，和组件的onDocumentLoad触发时机完全一致
        iframeWindow.PDFViewerApplication.eventBus.on('pagesloaded', (event) => {
          // 此处写入你的检索、高亮逻辑
          console.log('PDF渲染完成，总页数：', event.pagesCount);
        });
      }
    }, 150);
  }
}

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