PDF 查看器 Ionic 4 - TypeScript

本文介绍了如何在 Ionic 4 中使用 TypeScript 开发一个 PDF 查看器应用程序。

前置技能

• 了解 Ionic 4 框架和 Angular 6 及以上版本
• 熟悉 TypeScript 语言

准备工作

在开始之前，确保已安装了以下软件：

• Node.js
• Ionic CLI
• Angular CLI

步骤

1. 创建新项目

使用 Ionic CLI 创建一个新的 Ionic 应用程序，运行以下命令：

ionic start pdf-viewer --type=angular

该命令将创建一个名为 pdf-viewer 的新 Ionic 应用程序。

2. 安装依赖

进入新创建的应用程序目录，并安装以下依赖：

cd pdf-viewer
npm i ngx-extended-pdf-viewer
npm i @types/pdfjs-dist

ngx-extended-pdf-viewer 是一个 Angular 组件，可用于显示 PDF 文件。@types/pdfjs-dist 是 PDF.js 库的 TypeScript 类型。

3. 添加 PDF 文件

将一个或多个 PDF 文件放入 src/assets 目录中。

4. 创建组件

在 app 目录下创建一个名为 pdf-viewer 的组件：

cd app
ionic g component pdf-viewer

5. 实现 PDF 文件加载

在 pdf-viewer 组件中，使用以下代码加载 PDF 文件：

import { Component, OnInit } from '@angular/core';
import { PDFDocumentProxy, PDFProgressData } from 'pdfjs-dist';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ExtendedPdfViewerComponent } from 'ngx-extended-pdf-viewer';

@Component({
  selector: 'app-pdf-viewer',
  templateUrl: './pdf-viewer.component.html',
  styleUrls: ['./pdf-viewer.component.scss']
})
export class PdfViewerComponent implements OnInit {
  private ngUnsubscribe = new Subject<void>();

  pdfSrc = '';
  pdfLoaded = false;
  totalPages = 0;

  constructor() {}

  ngOnInit() {}

  onPdfLoadComplete(pdf: PDFDocumentProxy) {
    this.pdfLoaded = true;
    this.totalPages = pdf.numPages;
  }

  loadPdf(pdfUrl: string) {
    this.pdfSrc = pdfUrl;
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}

在上述代码中，我们定义了一个名为 PdfViewerComponent 的组件，并添加了一个名为 pdfSrc 的属性来保存要加载的 PDF 文件 URL、一个名为 pdfLoaded 的属性来跟踪文档是否已加载以及一个名为 totalPages 的属性来保存文档中的总页数。

我们还添加了三个方法：onPdfLoadComplete、loadPdf 和 ngOnDestroy。

onPdfLoadComplete 是 PDF.js 库给组件提供的回调函数，用于告知组件 PDF 文件已加载完毕。在此函数内部，我们设置了 pdfLoaded 属性为 true，并使用 PDFDocumentProxy 对象计算了文档中的总页数。

loadPdf 方法用于加载指定的 PDF 文件。我们将传入的 URL 赋值给 pdfSrc 属性，以便在组件模板中使用。

ngOnDestroy 方法用于释放订阅的资源。

6. 呈现组件

打开 pdf-viewer.component.html 文件，并使用以下代码作为组件模板：

<div>
  <ngx-extended-pdf-viewer
    [src]="pdfSrc"
    [showAll]="true"
    [print]="true"
    [download]="true"
    [originalSize]="false"
    [stickToPage]="false"
    (onLoadComplete)="onPdfLoadComplete($event)"
  ></ngx-extended-pdf-viewer>
  <p *ngIf="!pdfLoaded">文档加载中...</p>
  <p>总共 {{ totalPages }} 页</p>
  <button (click)="loadPdf('assets/sample.pdf')">加载示例 PDF 文件</button>
</div>

在此模板中，我们使用 ngx-extended-pdf-viewer 组件来呈现 PDF 文件，并将 src 属性设置为 pdfSrc 的值，以便加载 PDF 文件。

我们还添加了一些可选标记，例如 showAll、print、download 和 originalSize，这些标记是为了增强用户体验而添加的。

最后，我们添加了一个按钮，以便使用 loadPdf 方法加载一个示例 PDF 文件。

7. 测试应用程序

运行以下命令来启动 Ionic 应用程序：

ionic serve

打开浏览器，并访问 http://localhost:8100，将看到一个 PDF 查看器应用程序。

总结

本文详细介绍了如何在 Ionic 4 中使用 TypeScript 开发 PDF 查看器应用程序。通过使用 ngx-extended-pdf-viewer 组件和 PDF.js 库，我们可以轻松地加载并呈现 PDF 文件。