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

構(gòu)建這樣的解決方案需要在后端和前端都付出巨大的努力，然而如果有一種方法可以讓您在Angular PDF Viewer中用幾行代碼來管理PDF交互呢？

Kendo UI for Angular PDFViewer可以幫助大家解決上述的一些問題，它以最佳的方式應(yīng)用到每個(gè)合適的場景中。

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

Kendo UI for Angular 2024 Q1新版下載

場景

為一所大學(xué)開發(fā)一個(gè)應(yīng)用程序，管理部門希望為學(xué)生提供以下功能：

• 加載PDF不需要插件
• 把讀過的最后一頁保存起來
• 只有在接受條款和條件后才能啟用下載

設(shè)置項(xiàng)目

為了滿足大學(xué)的需求，我們使用Kendo UI for Angular PDFViewer，這個(gè)組件提供了大量的功能，當(dāng)與Angular集成時(shí)可提供一個(gè)全面的解決方案。

首先，用命令ng new elearning-platform設(shè)置Angular應(yīng)用。

ng new elearning-platform
cd elearning-platform
npm install

Kendo UI提供了一個(gè)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)

我們已經(jīng)設(shè)置好了，現(xiàn)在開始為用戶和PDF Viewer定義布局和界面。

布局和PDF查看器

首先從app.component.html中刪除默認(rèn)的HTML，添加以下HTML元素：

• 用于選擇PDF(選項(xiàng)：angular.pdf和signals.pdf)的下拉列表。
• 一個(gè)復(fù)選框，同意下載條款和條件。

<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”橫幅，請?jiān)趯?dǎo)入部分導(dǎo)入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元素，這些元素應(yīng)該只在用戶從下拉列表中選擇一個(gè)選項(xiàng)時(shí)出現(xiàn)。為了簡化，將它們封裝在一個(gè)ng容器中。

<ng-container>
<kendo-pdfviewer >
</kendo-pdfviewer>
<div class="pay-wall">
<h1>You reach limit to read </h1>
<button>Close</button>
</div>
</ng-container>

保存后，布局應(yīng)該是這樣的：

我們現(xiàn)在有了一個(gè)沒有任何交互的布局，在繼續(xù)之前先在assets目錄中創(chuàng)建兩個(gè)PDF文件——名稱與下拉菜單中顯示的一致(angular.pdf和signals.pdf)。

閱讀器服務(wù)

其中一個(gè)主要特性是能夠在用戶返回平臺(tái)時(shí)記住他們離開的地方，這意味著當(dāng)用戶打開PDF時(shí)，他們應(yīng)該被帶到在上次會(huì)話中離開的確切頁面。

 實(shí)現(xiàn)這一點(diǎn)的最簡單方法是在瀏覽器中使用本地存儲(chǔ)，然而為了減少app.component中的代碼量，我們將創(chuàng)建一個(gè)服務(wù)來封裝保存和存儲(chǔ)頁碼的邏輯。

要生成這個(gè)服務(wù)，使用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文件，執(zhí)行如下操作：

• 將PDF文件的資產(chǎn)URL指定為 //localhost:4200/assets/。
• 添加storageKey和initialPage變量。
• 實(shí)現(xiàn)兩個(gè)方法，savePage和getPage。我們將把這些方法連接到pdf-kendo-viewer事件來保存和加載頁面。

public assetURL = '//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有了第一個(gè)版本，讓我們將它與HTML標(biāo)記和Kendo UI PDF查看器連接起來。

將資產(chǎn)綁定到Kendo PDF查看器

現(xiàn)在我們已經(jīng)準(zhǔn)備好了ReaderService，下一步是啟用第一個(gè)交互并顯示PDF。為此，我們需要在app.component.ts文件中工作，并注入ReaderService。

下面是我們將要介紹的內(nèi)容：

• 將ReaderService注入組件。
• 初始化pdfAssetUrl和bookName變量。
• 創(chuàng)建一個(gè)selectBook方法，根據(jù)從下拉列表中選擇的圖書更新pdfAssetUrl。
• 將pdfAssetUrl和bookName綁定到PDF查看器。

首先，導(dǎo)入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);
....

接下來，讓我們聲明必要的變量并實(shí)現(xiàn)selectBook方法。在這個(gè)方法中，我們將通過組合readerService來更新readerService.assetUrl和bookName。

方法如下：

export class AppComponent {
title = 'elearning-platform';
readerService = inject(ReaderService);
pdfAssetUrl = '';
bookName!: string;
selectBook() {
this.pdfAssetUrl = `${this.readerService.assetURL}${this.bookName}`;
}
}

我們?nèi)绾螌?這些變量與方法聯(lián)系起來，并對變化做出反應(yīng)？Angular提供了幾種方法來監(jiān)聽事件并對變化做出反應(yīng)，為了響應(yīng)select元素中的change方法，我們可以使用(change)事件并將其鏈接到selectBook函數(shù)。

如何將選擇元素的值鏈接到bookName變量?別擔(dān)心，Angular提供了ngModel，它是FormsModule的一部分，它通過雙向數(shù)據(jù)綁定幫助我們對變化做出反應(yīng)。

<select (change)="selectBook()" [(ngModel)]="bookName">
<option value="angular.pdf">Angular</option>
<option value="signals.pdf">Signals</option>
</select>

接下來，我們希望響應(yīng)更改，以便將PDF加載到kendo-pdfviewer組件中。為了實(shí)現(xiàn)這一點(diǎn)，我們綁定了url和saveFileName屬性。

saveFileName屬性允許我們在用戶單擊下載工具欄時(shí)定義文件的名稱。

url屬性是將PDF綁定到組件的幾種方法之一，在本例中，我們提供存儲(chǔ)PDF的URL。

最后的代碼看起來像：

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

保存更改，然后重新加載頁面并與下拉菜單交互來加載不同的PDF。

是的，我們已經(jīng)成功加載了PDF!但是，仍然有一些功能需要完成，例如保存頁面位置和控制下載選項(xiàng)。篇幅有限，未完待續(xù)下期見~

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