如何在Angular中使用ng2-pdf-viewer显示本地PDF文件？

前提说明 #

浏览器出于安全限制，不允许前端代码直接读取用户本地磁盘的绝对路径，因此无法直接传入下载目录的文件路径直接加载PDF。你可以根据使用场景选择以下两种方案操作：

场景1：加载固定的PDF文件 #

如果要展示的PDF是固定文件，可以放到项目静态资源目录内加载：

• 将目标PDF文件存入Angular项目的src/assets目录下，示例文件名为demo.pdf
• 安装ng2-pdf-viewer依赖
  npm install ng2-pdf-viewer --save
• 在对应业务模块中导入PdfViewerModule

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

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

• 在组件模板中添加展示标签

<pdf-viewer
  [src]="'assets/demo.pdf'"
  [render-text]="true"
  style="display: block; width: 100%; height: 80vh;"
></pdf-viewer>

场景2：加载用户手动选择的本地PDF（含下载目录文件） #

如果要加载用户下载目录内的任意PDF，需要用户通过文件选择器主动选中文件后加载：

• 在组件模板中添加文件选择控件和PDF展示标签

<input type="file" accept="application/pdf" (change)="loadPdf($event)">
<pdf-viewer
  *ngIf="pdfSrc"
  [src]="pdfSrc"
  [render-text]="true"
  style="display: block; width: 100%; height: 80vh; margin-top: 20px;"
></pdf-viewer>

• 在组件逻辑中实现文件读取方法

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  pdfSrc: any = null;

  loadPdf(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files?.length) {
      const selectedFile = input.files[0];
      // 方式1：转成Blob URL加载
      this.pdfSrc = URL.createObjectURL(selectedFile);

      // 方式2：转成ArrayBuffer加载，二选一即可
      // const reader = new FileReader();
      // reader.onload = e => this.pdfSrc = e.target?.result;
      // reader.readAsArrayBuffer(selectedFile);
    }
  }
}

常见问题修复 #

如果出现pdf.worker.js加载报错，可手动指定worker文件路径，你可以将对应版本的pdf.worker.min.js下载到本地assets目录后配置：

import { pdfDefaultOptions } from 'ng2-pdf-viewer';

// 写在组件类外部或者构造函数中
pdfDefaultOptions.workerSrc = 'assets/pdf.worker.min.js';

内容的提问来源于stack exchange，提问作者ashish29494