Angular 18中使用ngx-extended-pdf-viewer无法显示传入的PDF文件问题求助

看起来你遇到的是一个典型的「组件工具栏正常但PDF内容不渲染」的问题，结合你描述的「控制台无报错、Blob下载正常」的情况，问题大概率出在组件配置、资源加载或者DOM上下文适配上。我来分享几个针对性的排查和解决思路：

1. 优先尝试：用Blob URL替代直接绑定Blob对象 #

ngx-extended-pdf-viewer在Material Dialog这类封装的DOM上下文里，直接绑定Blob对象可能存在渲染触发的问题，换成Blob URL的方式通常能解决：

修改你的预览组件代码：

import { Component, Inject, OnDestroy } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-pdf-preview',
  template: `
    <ngx-extended-pdf-viewer 
      [src]="pdfSrc" 
      useBrowserLocale="true" 
      [height]="'100%'" 
      [textLayer]="true" 
      [showHandToolButton]="true"
    ></ngx-extended-pdf-viewer>
  `,
  styles: [`
    :host {
      display: block;
      height: 100%;
      width: 100%;
      padding: 1rem; /* 可选：给工具栏留边距 */
    }
  `]
})
export class PdfPreviewDialogComponent implements OnDestroy {
  pdfSrc: string;

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: File,
    private cdr: ChangeDetectorRef
  ) {
    // 创建Blob URL替代直接传Blob
    this.pdfSrc = URL.createObjectURL(this.data);
    // 手动触发变更检测，确保Dialog内组件及时更新
    this.cdr.detectChanges();
  }

  ngOnDestroy(): void {
    // 必须清理Blob URL，避免内存泄漏
    if (this.pdfSrc.startsWith('blob:')) {
      URL.revokeObjectURL(this.pdfSrc);
    }
  }
}

2. 检查ngx-extended-pdf-viewer的静态资源是否正确引入 #

这个组件依赖PDF.js的配套资源（比如viewer.css、语言包、工具栏图标等），Angular 18的构建系统可能默认没有打包这些资源。需要在angular.json的assets数组中添加配置：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              // 其他已有的assets配置...
              {
                "glob": "**/*",
                "input": "node_modules/ngx-extended-pdf-viewer/assets",
                "output": "/assets/"
              }
            ]
          }
        }
      }
    }
  }
}

添加后重启开发服务器，确保资源能被正常访问。

3. 调整Dialog与PDF Viewer的高度适配 #

你当前设置的[height]="'auto'"在Material Dialog容器中可能无法正确计算可用空间，尝试以下调整：

• 打开Dialog时添加自定义面板类，清除默认padding：

  this.dialog.open(PdfPreviewDialogComponent, {
    data: this!.selectedFile,
    height: "90vh",
    width: "80vw",
    panelClass: 'pdf-dialog-container'
  })
  

  在全局样式文件（如styles.css）中添加：

  .pdf-dialog-container .mat-dialog-container {
    padding: 0;
    overflow: hidden;
  }
  

• 将PDF Viewer的高度设为100%，确保它占满Dialog的可用空间。

4. 验证版本兼容性 #

Angular 18是较新的版本，ngx-extended-pdf-viewer 24.2.4可能存在兼容性适配问题。尝试升级到最新版本：

npm install ngx-extended-pdf-viewer@latest

如果以上步骤都无效，你可以补充排查：

• 打开浏览器Network面板，确认viewer.js、pdf.worker.js等核心资源是否正常加载
• 用一个公开的PDF URL（如https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf）测试组件是否能正常渲染，排除Dialog传参的问题

内容来源于stack exchange