如何使用angular2从模板文件显示PDF

npm install -g @angular/cli

ng new pdf-viewer

cd pdf-viewer

npm install pdfjs-dist

ng generate component pdf-view

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as pdfjs from 'pdfjs-dist';

@Component({
  selector: 'app-pdf-view',
  templateUrl: './pdf-view.component.html',
  styleUrls: ['./pdf-view.component.css']
})
export class PdfViewComponent implements OnInit {
  @ViewChild('pdfViewer') pdfViewer: ElementRef;

  ngOnInit(): void {
    this.loadPdf();
  }

  loadPdf(): void {
    const pdfPath = 'path/to/pdf/file.pdf'; // 替换为实际的PDF文件路径
    const pdfViewer = this.pdfViewer.nativeElement;

    pdfjs.getDocument(pdfPath).promise.then(pdf => {
      pdf.getPage(1).then(page => {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        const viewport = page.getViewport({ scale: 1 });

        canvas.width = viewport.width;
        canvas.height = viewport.height;

        page.render({
          canvasContext: context,
          viewport: viewport
        }).promise.then(() => {
          pdfViewer.appendChild(canvas);
        });
      });
    });
  }
}

<div #pdfViewer></div>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { PdfViewComponent } from './pdf-view/pdf-view.component';

@NgModule({
  declarations: [
    AppComponent,
    PdfViewComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ng serve