Créez un lecteur puissant avec Kendo UI pour la visionneuse PDF angulaire

Angular PDF Viewer facilite le chargement de PDF sans nécessiter de plugins, enregistre la dernière page lue, exige l’acceptation des termes avant le téléchargement et met en œuvre une limite de pages payantes.

Aujourd’hui, lorsque les utilisateurs doivent travailler avec des fichiers PDF, ils doivent souvent télécharger des applications ou des plugins de navigateur. Contrôler la manière dont les utilisateurs interagissent avec le PDF n’est pas une tâche facile.

Si nous proposons le PDF sous forme de contenu, les utilisateurs peuvent le télécharger et interagir à l’aide des commandes fournies par le navigateur ou par le PDF lui-même. Cependant, certaines entreprises peuvent souhaiter contrôler la manière dont les utilisateurs interagissent avec le PDF, pour offrir une meilleure expérience ou limiter le téléchargement sous certaines conditions.

Construire une solution comme celle-ci nécessite des efforts importants à la fois sur le backend et sur le frontend. Cependant, et si je vous disais que vous pouvez gérer les interactions PDF avec seulement quelques lignes de code dans le fichier Visionneuse PDF angulaire?

Je peux expliquer chaque fonctionnalité de Progress Interface utilisateur Kendo pour angulaire PDFViewer, mais je pense que la meilleure façon d’en savoir plus et de le voir en action est de suivre un scénario réel.

Scénario

Nous développons une application pour une université. L’administration souhaite offrir aux étudiants les fonctionnalités suivantes :

• Chargez des PDF sans nécessiter de plugins.
• Enregistrez la dernière page lue du livre.
• Activez les téléchargements uniquement après avoir accepté les termes et conditions.

Ces fonctionnalités doivent être prêtes pour une démonstration dès aujourd’hui. Cela vous semble trop de travail ? Il y a une fonctionnalité supplémentaire : nous souhaitons afficher une bannière si un lecteur dépasse trois pages.

Pas de soucis! Nous disposons de Kendo UI pour Angular PDFViewer pour relever ces défis, nous laissant quelques heures pour profiter du jeu NBA.

Configurer le projet

Pour répondre aux besoins de l’université, nous utiliserons l’interface utilisateur Kendo pour Visionneuse PDF angulaire. Ce composant robuste offre une multitude de fonctionnalités qui, lorsqu’elles sont intégrées à Angular, fournissent une solution complète.

Tout d’abord, configurez votre application Angular avec la commande ng new elearning-platform.

ng new elearning-platform
cd elearning-platform
npm install

Kendo UI propose une commande schématique pour enregistrer sa visionneuse PDF angulaire.

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)

Nous avons déjà configuré la configuration, commençons donc par définir la mise en page et l’interface pour les utilisateurs et la visionneuse PDF.

Mise en page et visionneuse PDF

Commencez par supprimer le code HTML par défaut de app.component.html. Ajoutez les éléments HTML suivants :

• Une liste déroulante pour sélectionner le PDF (options : angulaire.pdf et signaux.pdf).
• Une case à cocher pour accepter les termes et conditions de téléchargement.

<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" />

Pour ajouter un kendo-pdfviewer et une bannière « paywall », importez le PDFViewerModulemodule dans la section importations.

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';
}

Ensuite, ajoutez le kendo-pdfviewer et le pay-wall éléments; ces éléments ne doivent apparaître que lorsque l’utilisateur sélectionne une option dans la liste déroulante. Pour simplifier, enveloppez-les dans un ng-container.

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

Une fois enregistrée, votre mise en page devrait ressembler à :

Nous avons maintenant une mise en page sans aucune interaction. Avant de continuer, créez deux fichiers PDF, nommés exactement comme ils apparaissent dans la liste déroulante (angular.pdf et signaux.pdf) dans le répertoire des ressources.

Le service lecteurs

L’une des principales fonctionnalités est la possibilité de se rappeler où les utilisateurs se sont arrêtés lorsqu’ils reviennent sur la plateforme. Cela signifie que lorsque les utilisateurs ouvrent un PDF, ils doivent être redirigés vers la page exacte où ils s’étaient arrêtés lors de leur dernière session.

Le moyen le plus simple d’y parvenir consiste à utiliser le stockage local dans le navigateur. Cependant, pour réduire la quantité de code dans app.componentnous allons créer un service pour encapsuler la logique de sauvegarde et de stockage du numéro de page.

Pour générer ce service, utilisez la commande 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)

Ouvrez le fichier reader.service.ts et effectuez les actions suivantes :

• Spécifiez l’URL des ressources pour les fichiers PDF comme http://localhost:4200/actifs/.
• Ajouter storageKey et initialPage variables.
• Mettre en œuvre deux méthodes, savePage et getPage. Nous relierons ces méthodes aux pdf-kendo-viewer événements pour enregistrer et charger la page.

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;
}

Parfait, nous avons la première version de notre reader.service. Connectons-le au balisage HTML et à la visionneuse PDF Kendo UI.

En savoir plus sur stockage local.

Liaison d’actifs à la visionneuse PDF Kendo

Maintenant que nous avons notre ReaderService prêt, l’étape suivante consiste à activer la première interaction et à afficher le PDF. Pour ce faire, nous devrons travailler dans le fichier app.component.ts et injecter le ReaderService.

Voici ce que nous allons couvrir :

• Injecter le ReaderService dans le composant.
• Initialiser pdfAssetUrl et bookName variables.
• Créer un selectBook méthode pour mettre à jour pdfAssetUrl en fonction du livre sélectionné dans la liste déroulante.
• Lier pdfAssetUrl et bookName au visualiseur PDF.

Tout d’abord, importez le ReaderService et injectez-le dans le composant à l’aide de l’injection de dépendances d’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);
  ....

Ensuite, déclarons les variables nécessaires et implémentons le selectBook méthode. Dans cette méthode, nous mettrons à jour le pdfAssetUrl en combinant readerService.assetUrl et bookName.

Voici comment:

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

Comment relier ces variables aux méthodes et réagir aux changements ? Eh bien, Angular propose plusieurs façons d’écouter les événements et de réagir aux changements. Pour réagir au change méthode dans l’élément select, nous pouvons utiliser la (change) événement et liez-le à l’événement selectBook fonction.

Comment relier la valeur du select élément au bookName variable? Ne vous inquiétez pas, Angular fournit ngModel, qui fait partie du FormsModule. Cela nous aide à réagir aux changements grâce à une liaison de données bidirectionnelle.

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

Pour utiliser ngModel, importez FormsModule dans app.module ou incluez-le dans les importations des composants autonomes.

Ensuite, nous souhaitons réagir aux changements afin de charger le PDF dans le kendo-pdfviewer composant. Pour y parvenir, nous lions le url et saveFileName propriétés.

Le saveFileName La propriété nous permet de définir le nom du fichier lorsque l’utilisateur clique sur la barre d’outils de téléchargement.

Le url La propriété est l’une des nombreuses manières de lier le PDF au composant ; dans notre cas, nous fournissons l’URL où le PDF est stocké.

En savoir plus sur la visionneuse PDF d’Angular et ses capacités de liaison de données dans le Documentation sur la liaison de données PDFViewer.

Le code final ressemble à :

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

Enregistrez vos modifications, puis rechargez la page et interagissez avec le menu déroulant pour charger différents PDF.

En savoir plus sur liaison bidirectionnelle en angulaire.

Oui, nous avons chargé le PDF avec succès ! Cependant, il reste encore quelques fonctionnalités à compléter, comme la sauvegarde de la position de la page et le contrôle des options de téléchargement. Allons-y !

Gérer les événements de la visionneuse PDF de Kendo UI

Nous avons quelques défis à relever :

• Activez l’option de téléchargement depuis la barre d’outils lorsque l’utilisateur accepte les termes et conditions.
• Enregistrez et stockez la dernière page sur laquelle se trouvait l’utilisateur.
• Afficher un mode de paiement lorsque l’utilisateur atteint la limite de pages.

Vous pensez que c’est trop de travail ? Le Kendo UI PDF Viewer simplifie le processus avec des écouteurs d’événements et seulement quelques lignes de code.

Travailler avec la barre d’outils PDFViewer de Kendo UI

Par défaut, Kendo PDFViewer affiche toutes les options dans la barre d’outils. Cependant, nous souhaitons plus de contrôle et souhaitons afficher le bouton de téléchargement uniquement si l’utilisateur accepte les termes et conditions.

Le Kendo UI PDF Viewer nous permet de définir une liste d’options dans la barre d’outils en fournissant un tableau de touches PDFListViewerTool. Nous pouvons spécifier cette liste dans reader.service.ts et l’ajouter à un nouveau tableau contenant les options de barre d’outils souhaitées.

Enfin, mettez en œuvre un allowDownload méthode qui ajoute la clé « télécharger » au tableau d’options de la barre d’outils. De cette façon, lorsque l’utilisateur accepte les termes et conditions, l’option « télécharger » deviendra disponible.

Le code final ressemblera à ceci :

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 ; 
  private storageKey: string = 'book-page';

  
  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();
    }
  }
}

Ensuite, déclarez une nouvelle variable nommée toolbarOptions et lier avec readerService.toolbar:

toolbarOptions = this.readerService.toolbar;

Ensuite, liez le tools propriété dans le composant kendo-pdfviewer pour toolbarOptions:

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

Après avoir enregistré vos modifications, vous remarquerez que la barre d’outils affiche désormais uniquement les quatre premières options, comme spécifié par toolbarOptions.

Pour afficher l’option « télécharger » uniquement lorsque l’utilisateur accepte les conditions, nous devons suivre quelques étapes.

Tout d’abord, créez une variable appelée acceptTerms. Utiliser Angular ngModel et le ngModelChange événement, nous pouvons alors appeler une nouvelle méthode nommée activateDownload. Cette méthode déclenchera leallowDownload méthode de notre service pour mettre à jour les options de la barre d’outils.

export class AppComponent {
  ....
  acceptTerms: boolean = false;
  
  activateDownload() {
    this.readerService.allowDownload(this.acceptTerms);
  }
}

Dans le app.component.html fichier, nous pouvons utiliser ngModel lier le acceptTerms variable et écoutez les changements avec le (ngModelChange) événement. Cet événement déclenchera le activateDownload méthode lorsque l’utilisateur interagit avec la case à cocher.

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

Enregistrez les modifications. Désormais, l’option « Télécharger » devrait apparaître dans la barre d’outils lorsque vous cochez la case « Accepter les conditions de téléchargement », et elle devrait disparaître lorsque vous la décochez.🔥

Parfait, nous contrôlons désormais la barre d’outils ! Examinons ensuite les capacités de gestion des événements de la visionneuse PDF de Kendo UI.

Enregistrer et charger des événements

C’est la dernière partie et la plus excitante, car nous pouvons créer une expérience utilisateur transparente. Le visualiseur PDF de Kendo UI propose deux événements pratiques : load et pageChange. Nous attacherons ces événements aux méthodes de notre reader.service pour charger ou enregistrer les informations pertinentes.

Pour ce faire, ouvrez app.component.ts et créez une méthode appelée saveCurrentPage ça prend un PDFViewerPageChangeEvent comme argument. Cet objet événement contient des informations sur la page actuelle dans le PDF.

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

Dans votre fichier HTML, associez le pageEvent avec le saveCurrentPage et définissez la hauteur de la visionneuse PDF sur 600 pixels.

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

Après avoir enregistré vos modifications, le service stockera la clé de la page du livre dans le stockage local.

Pour accéder à une page spécifique lorsque l’utilisateur charge le PDF et pour accéder également à l’interface utilisateur Kendo pour Angular PDFViewer, nous pouvons utiliser l’outil Angular. ViewChild décorateur. Cela nous permet d’accéder au composant et d’écouter le load événement.

Tout d’abord, ajoutez une référence de modèle au composant Kendo UI PDF Viewer, puis liez le load événement avec une nouvelle méthode appelée loadPage().

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

Dans le app.component.tsdéclarer un ViewChild pdfViewer avec le même nom que la référence du modèle pour accéder à la référence PDFViewerComponent et bookPage pour stocker le getPage du service :

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

Ajouter le loadPage méthode, qui utilise la pdfViewerc’est scrollToPage fonction pour accéder à la page renvoyée par readerService.getPage.

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

Enregistrez les modifications et le PDF passera à la dernière page que vous avez consultée. Ouais!

Afficher le Paywall

Pour mettre la cerise sur le gâteau, nous souhaitons bloquer l’interface utilisateur lorsque l’utilisateur atteint la limite de pages et l’empêcher de passer à la page suivante.

Ouvrir app.component.html. Tout d’abord, nous afficherons le kendo-pdf-viewer et le paywall uniquement lorsqu’un livre est sélectionné. Ajouter un *ngIf directive au ng-container à surveiller bookName. Utilisez également un autre *ngIf directive pour afficher le paywall en fonction du showMessageWall variable.

<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>

Dans app.component.tsajoutez deux nouvelles variables :

pageLimit = 2;
showMessageWall = false;

Ajoutez une nouvelle méthode pour valider si le currentPage dépasse le pageLimit. Si c’est vrai, définissez showMessageWall à vrai et utiliser le scrollToPage méthode pour revenir à pageLimit.

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

Enfin, invoquez cette méthode dans notre saveCurrentPage fonction pour le déclencher à chaque fois que l’utilisateur change de page.

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

Allez-y et sauvegardez-les. Après cela, nous voyons l’ensemble du flux de travail fonctionner comme prévu : l’interface utilisateur de Kendo pour le chargement d’Angular PDFViewer, la personnalisation de la barre d’outils et le paywall apparaissant lorsque la limite de pages est atteinte.

Conclusion

Nous avons démontré comment Kendo UI pour Angular PDFViewer peut vous faire gagner du temps et des efforts. Grâce à des fonctionnalités prêtes à l’emploi telles que la personnalisation de la barre d’outils et la gestion des événements, vous pouvez rapidement créer une visionneuse PDF riche en fonctionnalités avec un minimum de code. La possibilité d’enregistrer les préférences de l’utilisateur et d’intégrer des fonctionnalités de paywall ajoute une couche supplémentaire de sophistication à votre application, améliorant ainsi l’expérience utilisateur.

En utilisant Kendo UI pour Angular PDFViewer, vous n’ajoutez pas seulement un outil pour afficher des PDF ; vous intégrez un atout puissant qui élève l’ensemble de l’interface utilisateur, tout en accélérant votre processus de développement.

Ce n’est que le début de ce que vous pouvez faire avec Kendo UI pour Angular PDFViewer. Vérifiez documentation officielle avec de nombreux exemples et personnalisations, et n’oubliez pas que vous pouvez essayez Kendo UI gratuitement.

Ressources