如今当用户需要处理PDF文件时通常不得不下载应用程序或者浏览器插件控制用户如何与PDF交互并不是一件容易的事。如果我们提供PDF作为内容用户可以下载它并使用浏览器或PDF本身提供的控件进行交互。然而一些企业可能希望控制用户使用PDF的方式以提供更好的体验或在某些条件下限制下载。构建这样的解决方案需要在后端和前端都付出巨大的努力然而如果有一种方法可以让您在Angular PDF Viewer中用几行代码来管理PDF交互呢Kendo UI for Angular PDFViewer可以帮助大家解决上述的一些问题它以最佳的方式应用到每个合适的场景中。P.SKendo UI for Angular是专用于Angular开发的专业级Angular组件这些组件是专门为Angular构建的没有任何jQuery依赖项。场景为一所大学开发一个应用程序管理部门希望为学生提供以下功能加载PDF不需要插件把读过的最后一页保存起来只有在接受条款和条件后才能启用下载设置项目为了满足大学的需求我们使用​​​​​​​Kendo UI for Angular PDFViewer这个组件提供了大量的功能当与Angular集成时可提供一个全面的解决方案。首先用命令ng new elearning-platform设置Angular应用。ng new elearning-platformcd elearning-platformnpm installKendo UI提供了一个schematics命令来注册它的Angular PDF Viewer。ng add progress/kendo-angular-pdfvieweri Using package manager: npm√ Found compatible package version: progress/kendo-angular-pdfviewer14.0.0.√ Package information loaded.The package progress/kendo-angular-pdfviewer14.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)的下拉列表。一个复选框同意下载条款和条件。h1Welcome to E-learning Platform/h1 h2You can read online and save the state, also download the book (if you agree with the terms)/h2 select option valueangular.pdfAngular/option option valuesignals.pdfSignals/option /select label foracceptTerms Do you agree with the terms of download? /label input idacceptTerms typecheckbox /要添加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 classpay-wall h1You reach limit to read /h1 buttonClose/button /div /ng-container保存后布局应该是这样的我们现在有了一个没有任何交互的布局在继续之前先在assets目录中创建两个PDF文件——名称与下拉菜单中显示的一致(angular.pdf和signals.pdf)。阅读器服务其中一个主要特性是能够在用户返回平台时记住他们离开的地方这意味着当用户打开PDF时他们应该被带到在上次会话中离开的确切页面。实现这一点的最简单方法是在浏览器中使用本地存储然而为了减少app.component中的代码量我们将创建一个服务来封装保存和存储页码的逻辑。要生成这个服务使用Angular CLI命令ng g s services/reader。ng g s services/readerCREATE 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 valueangular.pdfAngular/option option valuesignals.pdfSignals/option /select接下来我们希望响应更改以便将PDF加载到kendo-pdfviewer组件中。为了实现这一点我们绑定了url和saveFileName属性。saveFileName属性允许我们在用户单击下载工具栏时定义文件的名称。url属性是将PDF绑定到组件的几种方法之一在本例中我们提供存储PDF的URL。最后的代码看起来像kendo-pdfviewer [saveFileName]bookName [url]pdfAssetUrl /kendo-pdfviewer保存更改然后重新加载页面并与下拉菜单交互来加载不同的PDF。是的我们已经成功加载了PDF!但是仍然有一些功能需要完成例如保存页面位置和控制下载选项。篇幅有限未完待续下期见~