如何在 Angular 中显示本地的 PDF 文件？

Question

我有 Angular Web 应用程序，我需要显示和打印位于我计算机中的 PDF。如何显示带有打印选项的 PDF 文件？ 我想显示 pdf 位于 C:\Users\xx\Desktop\xyz.pdf。

<iframe
    src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&scrollbar=0"
    frameBorder="0"
    scrolling="auto"
    height="100%"
    width="100%"
></iframe>

我尝试过 iframe 和其他工具，但正如我必须从本地显示的那样，它给出了错误。

Answer 1

您可以使用ng2-pdf-viewer 包。

步骤：

将 PdfViewerModule 导入您的模块：

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

import { PdfViewerModule } from 'ng2-pdf-viewer';
 
@NgModule({
  imports: [BrowserModule, PdfViewerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

class AppModule {}

在您的模板中使用此组件后：

import { Component } from '@angular/core';
 
@Component({
  selector: 'example-app',
  template: `
  <pdf-viewer [src]="pdfSrc"
              [render-text]="true"
              style="display: block;"
  ></pdf-viewer>
  `
})
export class AppComponent { }

渲染本地 PDF 文件

在您的 html 模板中添加输入：

<input (change)="onFileSelected()" type="file" id="file">

然后将 onFileSelected 方法添加到您的组件中：

onFileSelected() {
  let $img: any = document.querySelector('#file');

  if (typeof (FileReader) !== 'undefined') {
    let reader = new FileReader();

    reader.onload = (e: any) => {
      this.pdfSrc = e.target.result;
    };

    reader.readAsArrayBuffer($img.files[0]);
  }
}