ng2-pdf-viewer 与 Angular 18

Question

我尝试在我的 Angular 18 应用程序中显示 PDF，但出现了奇怪的行为。我使用了 https://www.npmjs.com/package/ng2-pdf-viewer 并在我的独立组件中调用了该模块。

我的ts文件

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PdfViewerModule } from 'ng2-pdf-viewer';



@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet,PdfViewerModule ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'viewer';
}

我的html

<pdf-viewer
      [src]="'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf'"
      [rotation]="0"
      [original-size]="false"
      [show-all]="true"
      [fit-to-page]="false"
      [zoom]="1"
      [zoom-scale]="'page-width'"
      [stick-to-page]="false"
      [render-text]="true"
      [external-link-target]="'blank'"
      [autoresize]="true"
      [show-borders]="false"
      style="width: 100%; height: 100vh;"
    ></pdf-viewer> 

错误

文档未定义 在 eval (C:\Users nass.sbai\Desktop iewe iewer ode_modules\pdfjs-dist\web\pdf_viewer.mjs:431:18) 在 async instantiateModule (file:///C:/Users/anass.sbai/Desktop/viewe/viewer/node_modules/vite/dist/node/chun

Answer 1

您的应用程序中启用了服务器端渲染，该项目使用仅存在于浏览器中的

window

对象，当您在服务器上渲染时，

window

将是未定义的。

将 PDF 包裹在其自己组件内的

defer

块内，该组件仅在浏览器上才会呈现，因此当您使用此组件时，请确保将该组件包裹在

defer

块内。

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PdfViewerModule } from 'ng2-pdf-viewer';

@Component({
  selector: 'app-pdf-viewer',
  standalone: true,
  imports: [RouterOutlet,PdfViewerModule ],
  template: `
    <pdf-viewer
      [src]="'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf'"
      [rotation]="0"
      [original-size]="false"
      [show-all]="true"
      [fit-to-page]="false"
      [zoom]="1"
      [zoom-scale]="'page-width'"
      [stick-to-page]="false"
      [render-text]="true"
      [external-link-target]="'blank'"
      [autoresize]="true"
      [show-borders]="false"
      style="width: 100%; height: 100vh;"
    ></pdf-viewer> 
  `,
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'viewer';
}

然后，当您使用此组件时，请确保将其包裹在

defer

块内。

@defer() {
    <app-pdf-viewer/>
}