当前位置: 首页 > 使用教程

界面组件Kendo UI for Angular教程 – 构建强大的PDF阅读器(一)

发布时间:2024-04-30

如今当用户需要处理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/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)的下拉列表。
  • 一个复选框,同意下载条款和条件。
<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>

保存后,布局应该是这样的:

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

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

界面组件Kendo UI for Angular教程 - 构建强大的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。

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

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


Telerik_KendoUI产品技术交流群:726377843    欢迎一起进群讨论

了解最新Kendo UI最新资讯,请关注Telerik中文网!

在线
客服
微信
QQ 电话
400-700-1020
返回
顶部