我尝试在我的 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
您的应用程序中启用了服务器端渲染,该项目使用仅存在于浏览器中的
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/>
}