Comment exporter des données au format PDF avec Kendo PDF Export et Angular

Permettez à vos utilisateurs d’exporter des données au format PDF dans vos applications Angular avec Kendo UI pour Angular.

Dans les applications Web, les utilisateurs visualisent les données de plusieurs manières, comme une grille, une liste ou un contenu stylisé. À partir de là, l’utilisateur souhaite parfois partager les données par e-mail, imprimer ou télécharger les données pour les conserver dans le format d’origine, et l’un des meilleurs formats pour stocker ou envoyer des données est le PDF.

Pour permettre aux utilisateurs d’exporter des données au format PDF, notre équipe dispose de plusieurs façons de générer des PDF : créez un backend pour créer le PDF, combattez avec des styles ou utilisez des bibliothèques JavaScript. Certains sont très délicats ou difficiles à adapter aux affaires et nécessitent de passer du temps à lire sur la bibliothèque sans une bonne documentation, des exemples ou un support.

Une option pour faire gagner du temps à votre entreprise et faciliter la vie de vos développeurs consiste à utiliser Progress Kendo UI pour Angularc’est
Exportation PDF composant. Il vous permet de créer un PDF à partir de données, de baliser avec un contenu de plusieurs pages, etc.

Le composant Kendo UI PDF Export est conçu nativement pour Angular, ce qui le rend simple à intégrer dans une application Angular, avec une API simple pour exporter rapidement les données au format PDF.

La meilleure façon de montrer à quel point il est facile de permettre à vos utilisateurs d’exporter des données au format PDF dans vos applications angulaires est avec un scénario réel. Dans cet article, vous apprendrez les points suivants :

• Installez l’interface utilisateur de Kendo pour le composant d’exportation PDF d’Angular
• Imprimer le contenu visible
• Ajouter une valeur dynamique aux données cachées
• Imprimer des données distantes

Scénario

Nous voulons créer une application pour obtenir une liste des joueurs NBA à partir de l’API et de l’utilisateur.

• Tout d’abord, récupérez la liste des joueurs et exportez-la au format PDF.
• Après avoir accepté TACOS (termes et conditions de service), téléchargez le PDF avec le nom de l’utilisateur et TACOS. 🌮
• Obtenez la liste complète des joueurs à partir de l’API et enregistrez-la au format PDF avec le nom de l’utilisateur.

Allons-y! 🏀📄

Configurer le projet

Si vous n’avez pas déjà créé l’application, créez une nouvelle application, export-data-pdfen exécutant la commande dans le terminal :

ng new export-data-pdf

Allez à la export-data-pdf dossier, modifiez le app.component.html et supprimez le code HTML par défaut pour être prêt pour notre prochaine étape.

Installez l’interface utilisateur de Kendo pour le composant d’exportation PDF d’Angular

Maintenant, continuez à utiliser le schéma angulaire pour installer l’interface utilisateur Kendo pour l’exportation PDF angulaire dans notre application en exécutant la commande suivante dans le terminal.

ng add @progress/kendo-angular-pdf-export

Il ajoute automatiquement le module d’exportation PDF dans le app.module et rend le composant d’exportation PDF de l’interface utilisateur de Kendo disponible :

{ PDFExportModule } from '@progress/kendo-angular-pdf-export';

@NgModule({
  imports: [
    PDFExportModule
  ],
  ...
})
export class AppModule { }

Mais ne vous inquiétez pas, si vous avez des contraintes particulières, peut-être des modules de fonctionnalités ou même un structure sans module dans votre application, l’interface utilisateur de Kendo fonctionnera toujours. Consultez leurs instructions d’installation manuelle qu’ils ont pour chaque groupe de composants : https://www.telerik.com/kendo-angular-ui-develop/components/pdf-export/get-started/#toc-manual-setup

Le service

Pour fournir des données dans notre application à l’aide de l’API, il est utile de créer un service NbaService pour demander les données à l’API et renvoyer la liste des joueurs. Nous pourrions faire cette logique dans notre composant, mais nous ne sommes pas des barbares. 🥴

Créer le fichier nba.service.ts en utilisant la CLI angulaire :

ng g s nba
CREATE src/app/nba.service.spec.ts (342 bytes)
CREATE src/app/nba.service.ts (132 bytes)

Ajoutez le HttpClient en utilisant le inject fonction et ajouter la méthode getPlayers() utiliser http pour demander les données. (Assurez-vous d’inclure HTTPClient dans vos fournisseurs app.module.ts, afin que vous puissiez l’utiliser dans notre fichier de service nba.)

Le code final ressemble à ceci :

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
  export class NbaService {
    api = 'https://www.balldontlie.io/api/v1/players'
  constructor(private httpClient: HttpClient) { }

  get(): Observable<any> {
    return this.httpClient.get(this.api).pipe((
      map((players: any) => players.data)
    ));
  }
} 

Nous n’approfondissons pas la création d’un service, mais si vous êtes intéressé, consultez ces ressources dans la documentation angulaire :

Lister les joueurs

Avant d’afficher la liste des joueurs, nous voulons créer un composant PlayerRow responsable de la restitution des informations sur les joueurs.

Ensuite, à l’aide de la CLI angulaire, nous allons créer le composant home à l’aide de l’indicateur -t pour le modèle en ligne, empêchant la création de fichiers html en exécutant la commande suivante.

ng g c -t player-row
 
CREATE src/app/player-row/player-row.component.scss (0 bytes)
CREATE src/app/player-row/player-row.component.spec.ts (621 bytes)
CREATE src/app/player-row/player-row.component.ts (232 bytes)

À l’intérieur du nouveau player-row dossier, accédez à player-row.component.ts et changer le sélecteur de app-player pour player. Ajoutez ensuite le nouveau lecteur de propriété à l’aide de la Input() décorateur pour l’utiliser dans le modèle et le lier aux propriétés du lecteur.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'player',
  template: `
   <div>
      {{ player.first_name }} {{ player.last_name }} |
      {{ player.team.full_name }} |
      {{ player.position }}
    </div>
  `,
})
export class PlayerRowComponent {
  @Input() player: any;

}

Ensuite, ouvrez le app.component.ts et injecter le NBAService en utilisant le inject fonction; il fournit le getPlayers() à stocker dans la variable players.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  nba = inject(NbaService)
  players$ = this.nba.get();
  ....

Ensuite, affichez la liste des joueurs dans the app.component.html à l’aide du tuyau async et le ngFor directive et prenez cinq joueurs en utilisant la fonction slice. On obtient la valeur en passant le player objet au composant du lecteur.

Le balisage ressemble à ceci :

<div class="players" *ngIf="players$ | async as players">
   <kendo-pdf-export #pdfArea>
     <div *ngFor="let player of players.slice(0, 5)">
       <br />
       <player [player]="player"></player>
     </div>
  </kendo-pdf-export>
</div>

<div class="players" *ngIf="players$ | async as players">
<div class="message-area">
<p>Feel free to save the first 10 players form API. 
<button kendoButton (click)="pdfArea.saveAs('players.pdf')">Save</button></p>
</div>
<kendo-pdf-export #pdfArea>
<ul *ngFor="let player of players.slice(0, 5)">
<li>
<player [player]="player"></player>
</li>
</ul>
</kendo-pdf-export>
</div>

Enregistrez les modifications et exécutez le ng serve -o l’application doit afficher la liste des joueurs.

Angular Basics : Introduction à la directive ngFor dans Angular

En savoir plus sur la boucle dans les listes dans Angular à l’aide de la directive ngFor et des mots-clés comme index, premier et dernier.

Exporter au format PDF

Nous avons deux objectifs dans notre étape actuelle lorsque l’utilisateur clique sur un bouton : imprimer au format PDF la liste des joueurs et définir le nom sur le PDF. Les deux tâches sont si faciles, grâce à l’interface utilisateur Kendo pour le composant d’exportation PDF angulaire.

Tout d’abord, nous déclarons la zone à imprimer en PDF avec kendo-pdf-export— dans notre cas, la zone avec la liste des joueurs. Ajoutez également une variable de modèle au kendo-pdf-export comme
pdfArea pour accéder et interagir avec le composant.

<kendo-pdf-export #pdfArea>
    <div *ngFor="let player of players.slice(0, 5)">
      <br />
      <player [player]="player"></player>
    </div>
</kendo-pdf-export>

Ensuite, nous ajoutons un bouton et attachons le click déclencheur d’événement au kendo-pdf-export référence pdfAreaen utilisant la méthode saveAs avec le nom players.pdf.

<div class="message-area">
  <p>Feel free to save the first ten players from API. <button (click)="pdfArea.saveAs('players.pdf')">Save</button></p>
</div> 

La méthode saveAs enregistre le contenu sous forme de fichier PDF avec un nom.

Enregistrez les modifications, puis testez-les. Cliquez sur Enregistrer et la zone dans pdfArea sera enregistrée au format PDF avec le nom players.pdf.

Parfait, nous enregistrons les données au format PDF !

Imprimer le contenu masqué

Nous savons déjà comment imprimer des données, mais notre prochain défi consiste à imprimer des données avec des valeurs dynamiques. Lorsque l’utilisateur active la case à cocher pour accepter les termes et ajoute son nom dans les termes PDF, le nom du fichier est mis à jour avec le même nom d’utilisateur.

Tout d’abord, déclarez une nouvelle variable pour userName dans le app.component.ts:

export class AppComponent {
  nba = inject(NbaService)
  players$ = this.nba.get();
  userName!: string;

Dans le app.component.html, ajoutez un nouveau div avec la classe hide. La classe hide utilise une marge négative pour masquer l’utilisateur :

.hide {
  position: absolute;
  left: -1000px;
}

Enveloppez le kendo-pdf-export avec une référence de variable de modèle termsPdf et utiliser l’interpolation pour rendre la valeur de userName. Il a la possibilité de personnaliser les propriétés du PDF lors de la génération. Nous utiliserons la taille du papier à « A4 » et « 2cm » de marge pour l’exemple.

<div class="hide">
  <kendo-pdf-export #termsPdf paperSize="A4" margin="2cm">
    <h1>Terms and conditions</h1>
    <p>{{userName}} has accepted the terms and conditions.</p>
  </kendo-pdf-export>
</div>

Les étapes finales ajoutent une entrée en utilisant [(ngModel)] pour lier dynamiquement la valeur userNameajoutez une case à cocher en utilisant la propriété de liaison pour le [disabled] avec le userNameécouter le change événement et utiliser la référence à termsPdfet utiliser la méthode saveAs avec la variable
userName.

<p>To download all players, first type your name and accept the terms and conditions.</p>
  <label for="userName">Your Name: </label><input id="userName" [(ngModel)]="userName"/>
  <label for="terms-check">Accept: </label><input id="terms-check" #termsCheck type="checkbox" [disabled]="!userName" (change)="termsPdf.saveAs(userName)" />

Nous devons importer FormModule utiliser le ngModel. Faites cela dans votre app.module.ts imports.

Que fait ce code? Nous avons activé la case à cocher pour télécharger le PDF avec le nom saisi par l’utilisateur dans le fichier et le contenu.

Exporter des données distantes

Le dernier défi est de permettre à une zone avec le userName et l’ajout d’un bouton lorsque l’utilisateur accepte les conditions. Lorsque l’utilisateur clique, il affiche un message de téléchargement pour obtenir les données de l’API et exporter la réponse au format PDF.

Tout d’abord, ajoutons une référence de variable de modèle à la case à cocher termsCheck pour lire la valeur cochée pour afficher la zone avec le nom d’utilisateur.

<input id="terms-check" #termsCheck type="checkbox" [disabled]="!userName" kendoCheckBox (change)="terms.saveAs(userName)" />
<div class="remote-pdf" *ngIf="termsCheck.checked">

Modifier le app.componet.tset ajoutez la variable getAllBtnStatus. Il affiche le message lors du téléchargement du PDF et remoteData pour stocker la réponse de l’API.

getAllBtnStatus = 'Get All Players';
remoteData: any;

Ensuite, créez le async méthode getAll(pdfExport: PDFExportComponent)en passant le PDFExportComponent comme paramètre. Il met à jour le getAllBtnStatus pour Downloading Data...attend la réponse de l’API et met à jour la valeur de remoteData.

En utilisant le setTimeOut fonction, nous attendons deux secondes pour mettre à jour le message à nouveau et utiliser le pdfExport composant pour enregistrer les données au format PDF.

async getAll(pdfExport: PDFExportComponent) {
  this.getAllBtnStatus = "Downloading Data..."
  const data = await firstValueFrom(this.players$);
  this.remoteData = data;
  setTimeout(() => {
    this.getAllBtnStatus = "Get All Players"
    pdfExport.saveAs('all-data.pdf');
  }, 2000)
}

En utilisant le hide classe à nouveau, nous ajoutons un div, enveloppons le pdfArea avec le kendo-pdf-exportet avec le nom de la variable #allDataPdf rendre les données de la
remoteData variable à nouveau en utilisant ngFor.

<div class="hide">
  <kendo-pdf-export #allDataPdf paperSize="A4" margin="2cm">
    <ul>
      <li *ngFor="let player of remoteData">
        <player [player]="player"></player>
      </li>
    </ul>
    <span>Report by {{userName}}</span>
  </kendo-pdf-export>
</div>

Enfin, ajoutez le bouton pour appeler le getAll méthode passant le allDataPdf référence du composant.

<button kendoButton (click)="getAll(allDataPdf)">{{getAllBtnStatus}}</button>

Notre app.component.html final devrait ressembler à ceci :

Enregistrez et voyez les modifications.

Parfait! Nous obtenons des données à distance, montrons le statut à l’utilisateur et le convertissons en PDF ! Super!!!

Conclusion

Nous avons appris à utiliser l’interface utilisateur de Kendo pour l’exportation PDF angulaire dans quelques scénarios, avec des données statiques, l’ajout de nouvelles données ou du contenu HTTP distant, mais même s’il est très simple à utiliser, il offre un degré élevé de personnalisation et de flexibilité. Il nous permet d’exporter des données spécifiques, de personnaliser l’apparence et la mise en page du PDF exporté, et même d’exporter la vue actuelle de l’application Angular.

Ce n’est que le début de ce que vous pouvez faire avec Kendo UI pour Angular PDF Export. Consultez la documentation officielle avec de nombreux exemples et personnalisations.