首页 > 其他分享 >界面组件Kendo UI for Angular教程 - 构建强大的PDF阅读器(二)

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

时间:2024-05-28 10:14:07浏览次数:29  
标签:工具栏 Kendo UI PDF currentPage Angular

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

构建这样的解决方案需要在后端和前端都付出巨大的努力,然而如果有一种方法可以让您在Angular PDF Viewer中用几行代码来管理PDF交互呢?Kendo UI for Angular PDFViewer可以帮助大家解决上述的一些问题,它以最佳的方式应用到每个合适的场景中。

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

在上文中(点击这里回顾>>),我们为大家介绍了构建PDF阅读器的基本设置、布局和PDF查看器构建等,本文将继续介绍如何处理Kendo UI PDF阅读器事件!

Kendo UI for Angular 2024 Q1新版下载

处理Kendo UI PDF Viewer事件

我们有几个挑战需要解决:

  • 当用户接受条款和条件时,从工具栏启用下载选项。
  • 保存并存储用户访问的最后一个页面。
  • 当用户达到页面限制时显示支付模式。

您觉得工作太多了吗?Kendo UI PDF Viewer使用事件侦听器和几行代码简化了这个过程。

使用Kendo UI PDFViewer工具栏

默认情况下,Kendo PDFViewer显示工具栏中的所有选项。然而我们想要更多的控制,并希望当用户同意条款和条件显示下载按钮。

Kendo UI PDF Viewer允许我们通过提供PDFListViewerTool键数组来定义工具栏中的选项列表,可以在reader.service.ts中指定这个列表,并在其后面添加一个包含所需工具栏选项的新数组。

最后实现一个allowDownload方法,将“download”键添加到工具栏选项数组中。这样当用户接受条款和条件时,“download”选项就可用了。

最后的代码看起来是这样:

import { Injectable } from '@angular/core';
import {PDFViewerTool} from "@progress/kendo-angular-pdfviewer";

export class ReaderService {
public assetURL = 'http://localhost:4200/assets/';

private currentPage: number = 0 ; // Initialize with the default page
private storageKey: string = 'book-page';

//list of new list of options
public toolbar: PDFViewerTool[] = ['search', 'selection', 'print', 'pager'];

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

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

allowDownload(acceptTerms: boolean) {
if (acceptTerms) {
this.toolbar.push('download');
} else {
this.toolbar.pop();
}
}
}

接下来,声明一个名为toolbarOptions的新变量,并绑定readerService.toolbar:

toolbarOptions = this.readerService.toolbar;

然后将kendo-pdfviewer组件中的tools属性链接到toolbarOptions:

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

保存更改后,您将注意到工具栏现在只显示前四个选项,由toolbarOptions指定。

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

为了仅在用户同意这些条款时显示“download”选项,我们需要采取几个步骤。

首先创建一个名为acceptTerms的变量,使用Angular的ngModel和ngModelChange事件,我们就可以调用一个名为activateDownload的新方法,这个方法将触发我们服务中的allowdownload方法来更新工具栏选项。

export class AppComponent {
....
acceptTerms: boolean = false;

activateDownload() {
this.readerService.allowDownload(this.acceptTerms);
}
}

在app.component.html文件中,我们可以使用ngModel来绑定acceptTerms变量,并通过(ngModelChange)事件来监听变化。当用户与复选框交互时,此事件将触发activateDownload方法。

<input [(ngModel)]="acceptTerms" id="acceptTerms" type="checkbox" (ngModelChange)="activateDownload()"/>

保存更改,现在当选中“Agree with the Terms of Download”复选框时,“Download”选项应该出现在工具栏中,当您取消选中它时,它应该消失。

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

现在可以控制工具栏了!接下来,让我们深入研究Kendo UI PDF Viewer的事件处理功能。

保存和加载事件

Kendo UI PDF Viewer提供了两个方便的事件:load和pageChange,我们将把这些事件附加到reader.service中的方法上,来加载或保存相关信息。

为此打开app.component.ts并创建一个名为saveCurrentPage的方法,该方法接受PDFViewerPageChangeEvent作为参数,此事件对象包含有关PDF中当前页面的信息。

saveCurrentPage($event: PDFViewerPageChangeEvent) {
this.readerService.savePage($event.currentPage);
}

在HTML文件中,将pageEvent与saveCurrentPage方法关联起来,并将PDF查看器的高度设置为600像素。

<kendo-pdfviewer
[tools]="toolbarOptions"
[saveFileName]="bookName"
[url]="pdfAssetUrl"
style="height: 600px;"
(pageChange)="saveCurrentPage($event)">
</kendo-pdfviewer>

保存更改后,服务将在本地存储中存储book-page键。

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

要在用户加载PDF时跳转到特定的页面,并访问Kendo UI for Angular PDFViewer,我们可以使用Angular的ViewChild装饰器,这允许访问组件并监听加载事件。

首先向Kendo UI PDF Viewer组件添加一个模板引用,然后用一个名为loadPage()的新方法链接加载事件。

<kendo-pdfviewer
#pdfViewer
[tools]="toolbarOptions"
[saveFileName]="bookName"
[url]="pdfAssetUrl"
style="height: 600px;"
(pageChange)="saveCurrentPage($event)"
(load)="loadPage()"
>
</kendo-pdfviewer>

在app.component.ts中,声明一个与模板引用同名的ViewChild pdfViewer来访问PDFViewerComponent引用和bookPage来存储来自服务的getPage:

@ViewChild('pdfViewer') pdfViewer!: PDFViewerComponent;
bookPage = this.readerService.getPage();

添加loadPage方法,该方法利用pdfViewer的scrollToPage函数导航到readerService.getPage返回的页面。

loadPage() {
this.bookPage = this.readerService.getPage();
this.pdfViewer.scrollToPage(this.bookPage);
}

保存更改,PDF将跳转到您查看的最后一页。

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

为了锦上添花,我们希望在用户达到页面限制时阻塞UI,并阻止他们移动到下一页。

打开app.component.html,首先将只在选择图书时显示kendo-pdf-viewer和paywall,在ng-container中添加一个*ngIf指令来监视bookName。此外,使用另一个*ngIf指令来显示基于showMessageWall变量的paywall。

<ng-container *ngIf="bookName">
...

<div class="pay-wall" *ngIf="showMessageWall">
<h1>You reach limit to read </h1>

<button (click)="showMessageWall = false"> close</button>
</div>
</ng-container>

在app.component.ts中,添加两个新变量:

pageLimit = 2;
showMessageWall = false;

添加一个新方法来验证currentPage是否超过pageLimit,如果为true,则将showMessageWall设置为true,并使用scrollToPage方法跳转回pageLimit。

private canReadMore(currentPage: number) {
if (currentPage > this.pageLimit) {
this.pdfViewer.scrollToPage(this.pageLimit);
this.showMessageWall = true;
} else {
this.showMessageWall = false;
}
}

最后在saveCurrentPage函数中调用此方法,以便在每次用户更改页面时触发它。

saveCurrentPage($event: PDFViewerPageChangeEvent) {
const { currentPage } = $event;
this.readerService.savePage(currentPage);
this.canReadMore(currentPage);
}

继续保存它们,在那之后我们看到整个工作流程如预期的那样运行:Kendo UI for Angular PDFViewer加载、工具栏自定义,以及当页面达到限制时出现的paywall。

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

我们已经演示了Kendo UI for Angular PDFViewer如何为您节省时间和精力,借助工具栏自定义和事件处理等开箱即用的功能,您可以用最少的代码快速构建功能丰富的PDF查看器。保存用户偏好和集成paywall功能为您的应用程序增加了一层额外的复杂性,增强了用户体验。

 

标签:工具栏,Kendo,UI,PDF,currentPage,Angular
From: https://www.cnblogs.com/AABBbaby/p/18217236

相关文章

  • 【WCH蓝牙系列芯片】-基于CH582开发板—主机连接从机(128bitUUID)实现通信
    -------------------------------------------------------------------------------------------------------------------------------------  在之前一篇主机枚举从机所有服务和特征的博客中,介绍主机连接从机的流程,并且枚举从机的服务,进行通信操作。在本篇博客中,基于CH582......
  • ABPVNext问题集锦-SwaggerUI的配置问题,配置Schema自动展开
    一,ABP框架中,运行的SwaggerUI中,默认情况下,不管Post还是Get等请求接口的Schema默认情况是折叠的,前端接入接口时需要一个个手动点开,如果参数过多比如100个参数 要点100次,使用不是太方便,或那种又有查询、又有新增,并且json里面各种套,对象里面有数组,数组里面套数据,  这种参数就很多了......
  • [分享]OffensiveCon24 UEFI 和翻译器的任务:使用跨架构 UEFI Quines 作为 UEFI 漏洞开
    链接:OffensiveCon24-uefi-task-of-the-translator目录x64assemblyx64程序集x64assemblysourcecodeforBGGP4entry:bggp4winningentry-x64assemblysourcecodeBGGP4UEFISelf-replicatingapp:bggp4winningentry-UEFIself-replicatingapp,compiledfromx64......
  • 【专题】2023年中国主要城市充电基础设施监测报告PDF合集分享(附原数据表)
    原文链接:https://tecdat.cn/?p=33600原文出处:拓端数据部落公众号2022年,中国城市充电基础设施继续快速增长,总量从2021年的261.7万台增加到2022年的521万台,同比增幅超过99%。其中,私人充电桩的增加数量达到194.2万台,是公共充电桩增加数量的3倍,私人充电桩占比也从2021年的56.2%增加......
  • 记录一个pdf转xlsx的方法
    importtkinter.filedialogimportpandasaspdimportosimportpdfplumberimporttkinterclassPdfReader:#output_file=tkinter.filedialog.asksaveasfile(title='保存到',initialfile=f"{name}.xlsx",filetypes=[("excel文件",......
  • 【专题】2024餐饮行业及营销趋势报告合集PDF分享(附原数据表)
    原文链接:https://tecdat.cn/?p=36256原文出处:拓端数据部落公众号2024年,餐饮行业的趋势展望聚焦于健康、国潮、单品爆款和情感体验四大方向。首先,健康成为了消费者在选择餐饮时的首要考量。人们越来越注重食材的新鲜度和健康性,对菜品的口味也有了更高的要求。这意味着餐饮品牌需......
  • 鸿蒙卷起来了!什么是ArkTS?ArkUI?
    最近消息出来了!纯血鸿蒙即将在六月底发布,市场关于鸿蒙应用开发很火,一些公司企业对鸿蒙开发技术人员更是开出惊人的高薪资。如果你想要学习鸿蒙应用开发,需要从鸿蒙相关的ArkTS语言开始进入。关于鸿蒙的ArkTS语言,我们首先从头了解一下前端的ts和js吧,方便更好的理解ArkTS和Ark......
  • Xenocode Postbuild——C#代码混淆器使用方法
    安装不多作赘述使用步骤选择【application】选项卡,选择【add】,如果添加的是exe,则【Preset】选择第一项,添加的是dll则选择第二项  选择【Protect】选项卡,将两个都勾选上,然后点击按钮“selectstrings”,最后点击按钮"BuildApplication"如果第一次使用,请将文件中......
  • 基于JAVA GUI的JDBC连接数据库
     要在JavaGUI中连接数据库,需要执行以下几个步骤:导入必要的包。你需要导入Java数据库连接相关的包,例如java.sql和javax.sql。与数据库连接相关的类和接口。  (1)DriverManger类。DriverManager类用于加载JDBD驱动并且创建其与数据库的连接。在DriverManager类中定义了......
  • 民国漫画杂志《时代漫画》第26期.PDF
    时代漫画26.PDF:https://url03.ctfile.com/f/1779803-1248635183-9832d2?p=9586(访问密码:9586)《时代漫画》的杂志在1934年诞生了,截止1937年6月战争来临被迫停刊共发行了39期。ps:资源来源网络!......