界面组件Kendo UI for Angular教程 - 构建强大的PDF阅读器（一）

如今当用户需要处理PDF文件时，通常不得不下载应用程序或者浏览器插件，控制用户如何与PDF交互并不是一件容易的事。如果我们提供PDF作为内容，用户可以下载它并使用浏览器或PDF本身提供的控件进行交互。然而，一些企业可能希望控制用户使用PDF的方式，以提供更好的体验或在某些条件下限制下载。

构建这样的解决方案需要在后端和前端都付出巨大的努力，然而如果有一种方法可以让您在Angular PDF Viewer中用几行代码来管理PDF交互呢？

Kendo UI for Angular PDFViewer可以帮助大家解决上述的一些问题，它以最佳的方式应用到每个合适的场景中。

P.S：Kendo UI for Angular是专用于Angular开发的专业级Angular组件，这些组件是专门为Angular构建的，没有任何jQuery依赖项。

Kendo UI for Angular 2024 Q1新版下载(Q技术交流：726377843）

场景

为一所大学开发一个应用程序，管理部门希望为学生提供以下功能：

加载PDF不需要插件
把读过的最后一页保存起来
只有在接受条款和条件后才能启用下载

设置项目

为了满足大学的需求，我们使用Kendo UI for Angular PDFViewer，这个组件提供了大量的功能，当与Angular集成时可提供一个全面的解决方案。

首先，用命令ng new elearning-platform设置Angular应用。

ng new elearning-platform
cd elearning-platform
npm install

Kendo UI提供了一个schematics命令来注册它的Angular PDF Viewer。

ng add @progress/kendo-angular-pdfviewer
i Using package manager: npm
√ Found compatible package version: @progress/kendo-angular-pdfviewer@14.0.0.
√ Package information loaded.
The package @progress/kendo-angular-pdfviewer@14.0.0 will be installed and executed.
Would you like to proceed? Yes
√ Packages successfully installed.
UPDATE src/app/app.module.ts (515 bytes)
UPDATE package.json (1708 bytes)
UPDATE angular.json (3165 bytes)
√ Packages installed successfully.
UPDATE src/main.ts (259 bytes)
UPDATE tsconfig.app.json (294 bytes)
UPDATE tsconfig.spec.json (300 bytes)

我们已经设置好了，现在开始为用户和PDF Viewer定义布局和界面。

布局和PDF查看器

首先从app.component.html中删除默认的HTML，添加以下HTML元素：

用于选择PDF(选项：angular.pdf和signals.pdf)的下拉列表。
一个复选框，同意下载条款和条件。

html 复制代码

<h1>Welcome to E-learning Platform</h1>
<h2>You can read online and save the state, also download the book (if you agree with the terms)</h2>

<select>
<option value="angular.pdf">Angular</option>
<option value="signals.pdf">Signals</option>
</select>

<label for="acceptTerms">
Do you agree with the terms of download?
</label>

<input id="acceptTerms" type="checkbox" />

要添加kendo-pdfviewer和"paywall"横幅，请在导入部分导入PDFViewerModule模块。

TypeScript 复制代码

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import {PDFViewerModule} from "@progress/kendo-angular-pdfviewer";

@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, PDFViewerModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'elearning-platform';
}

接下来，添加kendo-pdfviewer和pay-wall元素，这些元素应该只在用户从下拉列表中选择一个选项时出现。为了简化，将它们封装在一个ng容器中。

XML 复制代码

<ng-container>
<kendo-pdfviewer >
</kendo-pdfviewer>
<div class="pay-wall">
<h1>You reach limit to read </h1>
<button>Close</button>
</div>
</ng-container>

保存后，布局应该是这样的：

我们现在有了一个没有任何交互的布局，在继续之前先在assets目录中创建两个PDF文件------名称与下拉菜单中显示的一致(angular.pdf和signals.pdf)。

阅读器服务

其中一个主要特性是能够在用户返回平台时记住他们离开的地方，这意味着当用户打开PDF时，他们应该被带到在上次会话中离开的确切页面。

实现这一点的最简单方法是在浏览器中使用本地存储，然而为了减少app.component中的代码量，我们将创建一个服务来封装保存和存储页码的逻辑。

要生成这个服务，使用Angular CLI命令ng g s services/reader。

ng g s services/reader
CREATE src/app/services/reader.service.spec.ts (357 bytes)
CREATE src/app/services/reader.service.ts (135 bytes)

打开reader.service.ts文件，执行如下操作：

将PDF文件的资产URL指定为 http://localhost:4200/assets/。
添加storageKey和initialPage变量。
实现两个方法，savePage和getPage。我们将把这些方法连接到pdf-kendo-viewer事件来保存和加载页面。

TypeScript 复制代码

public assetURL = 'http://localhost:4200/assets/';
private currentPage: number = 1;
private storageKey: string = 'book-page';

savePage(page: number) {
localStorage.setItem(this.storageKey, page.toString());
}

getPage() {
const savedPage = localStorage.getItem(this.storageKey) || this.currentPage;
return +savedPage;
}

reader.service有了第一个版本，让我们将它与HTML标记和Kendo UI PDF查看器连接起来。

将资产绑定到Kendo PDF查看器

现在我们已经准备好了ReaderService，下一步是启用第一个交互并显示PDF。为此，我们需要在app.component.ts文件中工作，并注入ReaderService。

下面是我们将要介绍的内容：

将ReaderService注入组件。
初始化pdfAssetUrl和bookName变量。
创建一个selectBook方法，根据从下拉列表中选择的图书更新pdfAssetUrl。
将pdfAssetUrl和bookName绑定到PDF查看器。

首先，导入ReaderService，并使用Angular的依赖注入将其注入到组件中。

TypeScript 复制代码

import { Component, inject } from '@angular/core';
import { ReaderService } from './services/reader.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
title = 'elearning-platform';
readerService = inject(ReaderService);
....

接下来，让我们声明必要的变量并实现selectBook方法。在这个方法中，我们将通过组合readerService来更新readerService.assetUrl和bookName。

方法如下：

TypeScript 复制代码

export class AppComponent {
title = 'elearning-platform';
readerService = inject(ReaderService);
pdfAssetUrl = '';
bookName!: string;
selectBook() {
this.pdfAssetUrl = `${this.readerService.assetURL}${this.bookName}`;
}
}

我们如何将这些变量与方法联系起来，并对变化做出反应？Angular提供了几种方法来监听事件并对变化做出反应，为了响应select元素中的change方法，我们可以使用(change)事件并将其链接到selectBook函数。

如何将选择元素的值链接到bookName变量?别担心，Angular提供了ngModel，它是FormsModule的一部分，它通过双向数据绑定帮助我们对变化做出反应。

XML 复制代码

<select (change)="selectBook()" [(ngModel)]="bookName">
<option value="angular.pdf">Angular</option>
<option value="signals.pdf">Signals</option>
</select>

接下来，我们希望响应更改，以便将PDF加载到kendo-pdfviewer组件中。为了实现这一点，我们绑定了url和saveFileName属性。

saveFileName属性允许我们在用户单击下载工具栏时定义文件的名称。

url属性是将PDF绑定到组件的几种方法之一，在本例中，我们提供存储PDF的URL。

最后的代码看起来像：

XML 复制代码

<kendo-pdfviewer
[saveFileName]="bookName"
[url]="pdfAssetUrl">
</kendo-pdfviewer>

保存更改，然后重新加载页面并与下拉菜单交互来加载不同的PDF。

是的，我们已经成功加载了PDF!但是，仍然有一些功能需要完成，例如保存页面位置和控制下载选项。篇幅有限，未完待续下期见~