如今当用户需要处理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新版下载
场景
为一所大学开发一个应用程序，管理部门希望为学生提供以下功能：
- 加载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/[email protected].
√ Package information loaded.
The package @progress/[email protected] 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)的下拉列表。
- 一个复选框，同意下载条款和条件。
<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模块。
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容器中。
<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事件来保存和加载页面。
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的依赖注入将其注入到组件中。
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。
方法如下：
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的一部分，它通过双向数据绑定帮助我们对变化做出反应。
<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。
最后的代码看起来像：
<kendo-pdfviewer [saveFileName]="bookName" [url]="pdfAssetUrl"> </kendo-pdfviewer>
保存更改，然后重新加载页面并与下拉菜单交互来加载不同的PDF。
是的，我们已经成功加载了PDF!但是，仍然有一些功能需要完成，例如保存页面位置和控制下载选项。篇幅有限，未完待续下期见~