如今當用戶需要處理PDF文件時，通常不得不下載應(yīng)用程序或者瀏覽器插件，控制用戶如何與PDF交互并不是一件容易的事。如果我們提供PDF作為內(nèi)容，用戶可以下載它并使用瀏覽器或PDF本身提供的控件進行交互。然而，一些企業(yè)可能希望控制用戶使用PDF的方式，以提供更好的體驗或在某些條件下限制下載。

構(gòu)建這樣的解決方案需要在后端和前端都付出巨大的努力，然而如果有一種方法可以讓您在Angular PDF Viewer中用幾行代碼來管理PDF交互呢？Kendo UI for Angular PDFViewer可以幫助大家解決上述的一些問題，它以最佳的方式應(yīng)用到每個合適的場景中。

P.S：Kendo UI for Angular是專用于Angular開發(fā)的專業(yè)級Angular組件，這些組件是專門為Angular構(gòu)建的，沒有任何jQuery依賴項。

在上文中（），我們?yōu)榇蠹医榻B了構(gòu)建PDF閱讀器的基本設(shè)置、布局和PDF查看器構(gòu)建等，本文將繼續(xù)介紹如何處理Kendo UI PDF閱讀器事件！

Kendo UI for Angular 2024 Q1新版下載

處理Kendo UI PDF Viewer事件

我們有幾個挑戰(zhàn)需要解決：

• 當用戶接受條款和條件時，從工具欄啟用下載選項。
• 保存并存儲用戶訪問的最后一個頁面。
• 當用戶達到頁面限制時顯示支付模式。

您覺得工作太多了嗎？Kendo UI PDF Viewer使用事件偵聽器和幾行代碼簡化了這個過程。

使用Kendo UI PDFViewer工具欄

 默認情況下，Kendo PDFViewer顯示工具欄中的所有選項。然而我們想要更多的控制，并希望當用戶同意條款和條件顯示下載按鈕。

Kendo UI PDF Viewer允許我們通過提供PDFListViewerTool鍵數(shù)組來定義工具欄中的選項列表，可以在reader.service.ts中指定這個列表，并在其后面添加一個包含所需工具欄選項的新數(shù)組。

最后實現(xiàn)一個allowDownload方法，將“download”鍵添加到工具欄選項數(shù)組中。這樣當用戶接受條款和條件時，“download”選項就可用了。

最后的代碼看起來是這樣：

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

export class ReaderService {
public assetURL = '//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>

保存更改后，您將注意到工具欄現(xiàn)在只顯示前四個選項，由toolbarOptions指定。

為了僅在用戶同意這些條款時顯示“download”選項，我們需要采取幾個步驟。

首先創(chuàng)建一個名為acceptTerms的變量，使用Angular的ngModel和ngModelChange事件，我們就可以調(diào)用一個名為activateDownload的新方法，這個方法將觸發(fā)我們服務(wù)中的allowdownload方法來更新工具欄選項。

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

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

在app.component.html文件中，我們可以使用ngModel來綁定acceptTerms變量，并通過(ngModelChange)事件來監(jiān)聽變化。當用戶與復(fù)選框交互時，此事件將觸發(fā)activateDownload方法。

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

保存更改，現(xiàn)在當選中“Agree with the Terms of Download”復(fù)選框時，“Download”選項應(yīng)該出現(xiàn)在工具欄中，當您取消選中它時，它應(yīng)該消失。

現(xiàn)在可以控制工具欄了！接下來，讓我們深入研究Kendo UI PDF Viewer的事件處理功能。

保存和加載事件

Kendo UI PDF Viewer提供了兩個方便的事件：load和pageChange，我們將把這些事件附加到reader.service中的方法上，來加載或保存相關(guān)信息。

為此打開app.component.ts并創(chuàng)建一個名為saveCurrentPage的方法，該方法接受PDFViewerPageChangeEvent作為參數(shù)，此事件對象包含有關(guān)PDF中當前頁面的信息。

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

在HTML文件中，將pageEvent與saveCurrentPage方法關(guān)聯(lián)起來，并將PDF查看器的高度設(shè)置為600像素。

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

保存更改后，服務(wù)將在本地存儲中存儲book-page鍵。

要在用戶加載PDF時跳轉(zhuǎn)到特定的頁面，并訪問Kendo UI for Angular PDFViewer，我們可以使用Angular的ViewChild裝飾器，這允許訪問組件并監(jiān)聽加載事件。

首先向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來存儲來自服務(wù)的getPage：

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

添加loadPage方法，該方法利用pdfViewer的scrollToPage函數(shù)導(dǎo)航到readerService.getPage返回的頁面。

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

保存更改，PDF將跳轉(zhuǎn)到您查看的最后一頁。

顯示Paywall

為了錦上添花，我們希望在用戶達到頁面限制時阻塞UI，并阻止他們移動到下一頁。

打開app.component.html，首先將只在選擇圖書時顯示kendo-pdf-viewer和paywall，在ng-container中添加一個*ngIf指令來監(jiān)視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設(shè)置為true，并使用scrollToPage方法跳轉(zhuǎn)回pageLimit。

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

最后在saveCurrentPage函數(shù)中調(diào)用此方法，以便在每次用戶更改頁面時觸發(fā)它。

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

繼續(xù)保存它們，在那之后我們看到整個工作流程如預(yù)期的那樣運行：Kendo UI for Angular PDFViewer加載、工具欄自定義，以及當頁面達到限制時出現(xiàn)的paywall。

總結(jié)

我們已經(jīng)演示了Kendo UI for Angular PDFViewer如何為您節(jié)省時間和精力，借助工具欄自定義和事件處理等開箱即用的功能，您可以用最少的代碼快速構(gòu)建功能豐富的PDF查看器。保存用戶偏好和集成paywall功能為您的應(yīng)用程序增加了一層額外的復(fù)雜性，增強了用戶體驗。

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進群討論