界面組件Kendo UI for Angular教程 - 構建強大的PDF閱讀器（一）

如今當用戶需要處理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/[email protected].
√ Package information loaded.
The package @progress/[email protected] 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>

保存後，佈局應該是這樣的：

我們現在有了一個沒有任何交互的佈局，在繼續之前先在assets目錄中創建兩個PDF文件——名稱與下拉菜單中顯示的一致(angular.pdf和signals.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。

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