Génération de PDF à partir de HTML dans React : exportation de grilles de données

Dans ce troisième article de blog de la série Générer des fichiers PDF dans React, nous examinons comment exporter du contenu et des données dans des composants d'interface utilisateur avancés tels que la grille de données et la TreeList.

Bienvenue dans le blog Génération de PDF dans React. post series!

• Dans la partie 1, Générer un PDF dans React : aussi simple que 1-2-3nous avons couvert les bases de la génération de PDF dans React en incluant quelques éléments HTML de base et en voyant le plus rapide manière dont nous pouvons générer un fichier PDF à partir de HTML dans React.
• Dans la partie 2, Génération de PDF à partir de HTML dans React Demo : Exporting Invoicesnous nous sommes concentrés sur un scénario courant : exporter une facture créée à l'aide de HTML et CSS et exporter son contenu au format PDF à l'aide de React. Cet article a également examiné comment nous pouvons inclure des polices personnalisées avec des symboles uniques et comment nous pouvons contrôler la taille du papier du fichier PDF généré en utilisant uniquement CSS. Réagir. Plus précisément, nous verrons un exemple d'exportation de composants avancés de l'interface utilisateur React tels que KendoReact Data Grid et React TreeListainsi que tout leur contenu, vers un fichier PDF. Les deux composants React ont des fonctionnalités d'exportation PDF intégrées, ce qui rend l'exportation aussi simple que de cliquer sur un bouton.

  Pour la grille de données, nous passerons également par les étapes d'ajout de la pagination avec des données locales. Il s'agit de voir comment les options de configuration disponibles pour générer un fichier PDF peuvent déterminer si nous exportons uniquement la vue actuelle ou toutes les données disponibles dans la table de données. De plus, nous pouvons configurer si nous devons simplement exporter les données actuellement affichées, toutes les données liées au composant (y compris les données sur le serveur), et même modifier l'apparence du fichier PDF au fur et à mesure que nous le générons.

  Configuration Notre grille de données React

  Installation de la grille KendoReact

  Avant de commencer, je vous recommande vivement de consulter la Page de démarrage de la grille KendoReactqui couvre les instructions d'installation et des liens vers plusieurs articles de documentation supplémentaires utiles qui aider à comprendre la grille de données React.

  Tout ce qui suit suppose que nous avons mis en place un projet React existant. Plus précisément, un projet configuré à l'aide de create react app.

  La première étape consiste à installer les bons packages npm, ce que nous pouvons faire en copiant et en collant la commande d'installation npm de l'article auquel nous venons de créer un lien. .

  npm install --save @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-data-tools @progress/kendo-react-inputs @progress/kendo-react- intl @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs @progress/kendo-drawing @progress/kendo-react-animation @progress/kendo-licensing
  

  Nous devons également installer le thème que nous souhaitons utiliser dans notre application. KendoReact prend en charge trois langages de conception : le thème Kendo UI Default, Bootstrap ou Material Design. Dans tous les exemples ci-dessous, nous utiliserons le thème Material, mais la page de présentation des styles et des thèmes contient des instructions sur la façon d'installer votre thème préféré.

  Comme mentionné, nous utiliserons le thème Material. installons-le également.

  npm install --save @progress/kendo-theme-material

  Remarque : si vous n'avez jamais utilisé KendoReact auparavant, vous devez également suivre le étapes d'activation de la clé de licence mises en évidence dans cet article.

  Une fois que nous avons pris en charge les étapes d'installation, nous pouvons ajouter les instructions d'importation appropriées dans notre application React. Dans notre App.js, nous pouvons ajouter ce qui suit :

  import  *  as React from  'react';
  import  '@ progress/kendo-theme-material/dist/all.css';
  import  './style.css';
  import { Grid, GridColumn as Colonne } from  '@progress/kendo-react-grid';
  

  Comme nous pouvons le voir, nous avons maintenant importé le thème Material Design ainsi que les éléments spécifiques à la grille appropriés dont nous avons besoin.

  Ajout de données et définition de la grille

  La table de données KendoReact peut facilement se lier à à peu près tout type d'objet et pour simplifier les choses, nous allons simplement travailler avec un simple tableau d'objets. Une fois que nous connaissons les champs disponibles sur notre objet, nous pouvons définir des composants dans notre déclaration Grid et utiliser la propriété field pour lier une colonne au champ approprié.

  Pour rendre cela simple à référencer pour tout le monde, voici un projet StackBlitz où nous avons ajouté des exemples de données à utiliser via grid-sample-products.jsx—importés en tant que gridSampleProducts—puis défini une grille React avec un sous-ensemble de colonnes.

  Ajout de la pagination

  La pagination en tant que concept permet aux utilisateurs d'intégrer des composants à forte intensité de données comme la table de données React en petits morceaux au lieu d'une énorme liste d'éléments de données avec une barre de défilement géante. La pagination présente également plusieurs autres avantages, notamment les performances, car moins de données doivent être affichées à la fois.

  La pagination d'aujourd'hui nous aidera à montrer comment nous pouvons personnaliser ce qu'il faut générer au format PDF dans la grille. Plus précisément, voulons-nous exporter uniquement la page actuelle des éléments de données ou voulons-nous exporter toutes les données qui peuvent être trouvées sur toutes les pages de la grille de données ? Alors que dans notre cas, toutes les données seront fournies à la grille en même temps, cela pourrait même aller jusqu'à interroger un serveur pour toutes les données disponibles et générer un fichier PDF. Il s'agit donc d'une fonctionnalité extrêmement puissante prête à l'emploi.

  Pour mieux comprendre la pagination, l'article de la documentation KendoReact Data Grid Paging fournit des informations détaillées et un exemple sur la façon d'implémenter la pagination.

  En nous basant sur l'exemple StackBlitz que nous avons lié ci-dessus, nous devons importer un package npm supplémentaire que nous avons initialement installé et également importer des éléments supplémentaires à partir de React pour nous assurer que nous pouvons commencer à travailler avec des crochets. Ainsi, dans notre App.js, nous pouvons ajouter :

  import { useState, useEffect, useCallback } from   'react';
  import { processus } from  '@progress/kendo-data-query';
  

  Pour les personnes intéressées, le package @progress/kendo-data-query est une bibliothèque d'aide que KendoReact propose pour transformer les données dans un format que la grille de données KendoReact peut facilement utiliser pour aider autour des aspects tels que la pagination, le tri, le filtrage, le regroupement et plus encore. Le fait d'avoir cela en tant que package séparé permet de séparer les préoccupations et aide la table de données React à être super performante car une grande partie du traitement se produit dans la bibliothèque Data Query.

  Maintenant, pour comprendre la pagination, il y a quelques concepts à considérer. . Tout d'abord, la pagination d'une grande collection de données peut être effectuée avec seulement quelques variables :

  • Le tableau de données
  • Le nombre total d'éléments à afficher sur une page—c'est ce qu'on appelle la taille de la page, ou prendre ("prendre autant d'éléments de données de nos données")
  • Où dans notre tableau de données nous sommes actuellement—cela nous aide à garder une trace de la page sur laquelle nous nous trouvons ; également appelé skip car nous pouvons calculer combien d'éléments de données nous devons ignorer (si nous connaissons la page actuelle et la taille de la page)

  Une fois que nous les avons en tête, nous devons également définir un état pour la Grille sur la base de ces informations. Intégrer ces concepts dans le code et notre App.js :

  const [data, setData] = useState( );
  const [take, setTake] = useState(5)[19659022];
  const [skip, setSkip] = useState(0) ;
  
  const dataState = {
    prendre,
    sauter
  };
  

  Avec cette configuration, nous disons maintenant que nous allons prendre cinq éléments de données et que nous sautons aucun élément, ce qui signifie que nous commençons à 0 et comptons jusqu'à 5.

  Voici maintenant un peu de magie initiale de la requête de données une bibliothèque. Si nous voulons prendre un tableau et le transformer en quelque chose que notre grille de données peut utiliser pour la pagination, nous appelons simplement la fonction process() :

  constprocessedData = process( gridSampleProducts, dataState);`
  

  C'est aussi simple que ça !

  Maintenant, avec les données en main, nous pouvons mettre à jour notre grille pour récupérer les données de notre variable processingData et définir la propriété paginable pour indiquer à la grille que nous voulons afficher le pager à le bas de la grille.

  <Grid
    data={processedData}
    rowHeight={[19659073]40}
    pageable
    {...dataState}
    onDataStateChange={ onDataStateChange}
    >
      <Column  field="ProductID"  title ="ID"  />
      <Column  champ="ProductName"  titre="Nom"[19659120]/>
      <Column  field="Category.CategoryName"  title ="Catégorie"  />
      <Colonne  champ="UnitPrice"  titre="Prix"  />
      <Colonne  champ=[19659022]"UnitésEn Stock"  titre="En Stock"  />
      < Column  field="Discontinued"  title="Discontinued"   />
  </Grille>
  

  Nous n'avons pas besoin d'écrire entièrement pageable={true} car la valeur par défaut lorsque cette prop est définie est true. De plus, nous pouvons lier nos variables de saut et de prise, qui sont utilisées pour afficher les éléments de données « X – Y de Z » au bas du pager. Les mathématiques sont toutes prises en charge automatiquement. Nous avons ces variables sur notre variable dataState afin que nous puissions utiliser un opérateur de propagation JS pour simplement appliquer ces propriétés à notre configuration de grille plutôt que de le saisir manuellement (un peu de gain de temps) !

  Le le dernier élément à couvrir est l'événement onDataStateChangequi se déclenchera à chaque fois que des données sont modifiées dans la grille de données React. Pour nous, cela signifie la pagination, mais cela se déclenchera également pour le tri, le regroupement, le filtrage, etc. Voici ce que nous pouvons utiliser pour cet événement :

  const onDataStateChange = useCallback(
    event => {
      setTake(event.dataState.take);
      setSkip (event.dataState.skip);
    },
    [setTake, setSkip]
  );
  

  Dans ce cas, nous définissons un rappel qui récupérera le paramètre d'événement qui contiendra les variables take et skip pour indiquer où nous en sommes dans les données. Nous mettons ensuite à jour l'état actuel de notre composant pour nous assurer que la grille est au courant des nouvelles valeurs de saut et de prise. Cela fonctionnera à la fois pour la pagination en avant et en arrière !

  Voici un projet StackBlitz montrant tout jusqu'à ce point.

  Avec tout cela fait, nous sommes maintenant prêts à ajouter une génération de PDF au mélange !

  Génération de PDF Fichiers de la grille de données KendoReact

  Si vous avez lu les parties 1 et 2 de cette série de billets de blog, vous savez que nous devons installer et importer la bibliothèque de traitement PDF KendoReact.

  npm install --save @progress/kendo-react-pdf @progress/kendo-drawing @progress/kendo-licensing
  

  Pendant que nous réinstallons les choses, ajoutons les composants KendoReact Button et React Checkbox car nous les utiliserons pour une configuration dynamique.

  @progress/kendo- réagir-boutons @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-drawing @progress/kendo-licensing
  

  Nous allons également mettre à jour nos déclarations d'importation pour non seulement inclure ces nouveaux packages, mais également ajouter useRef à partir de React :

  import  *  as React de  'react';
  import { useRef, useState, useEffect, useCallback } de  'react';
  import  '@progress/kendo-theme-material/dist/all.css';
  import[19659021]'./style.css';
  import {
    Grille,
    GridColumn as Colonne,
    Barre d'outils Grille
  } de  '@progress/kendo-react-grid';
  import { GridPDFExport } de  '@ progress/kendo-react-pdf';
  import { Bouton } from  '@progress/kendo-react-buttons';[19659023]import { Case à cocher } from  '@progress/kendo-react-inputs';
  import { gridSampleProducts } from  './grid-sample-products.jsx';
  import { process } from  '@progress /kendo-data-query';
  

  Comme dans les autres articles de blog, l'essence de l'exportation au format PDF consiste à envelopper notre composant Grid avec la balise. Si nous enveloppons simplement notre élément de grille actuel avec cette balise, la grille disparaîtra de notre page car cet élément entier est simplement responsable de l'exportation au format PDF. Nous devrons donc essentiellement doubler pour afficher également l'élément Grid. Pour faciliter cela, nous pouvons définir un nouvel élément qui peut être réutilisé.

  const GridElement = (
    <Grid
      data=[19659022]{processedData}
      rowHeight={40}
      pageable
      {... dataState}
      onDataStateChange={onDataStateChange}
    >
      <GridToolbar>
         <Bouton  icon="pdf"  onClick={onPdfExport }  disabled={isPdfExporting}  />
      </GridToolbar>
      <Colonne   champ="ProductID"  titre= "ID"  />
      <Column  champ="ProductName"  titre="Nom"  />
      <Colonne  champ=[19659022]"Catégorie.NomCatégorie"  titre="Catégorie"  />
      < Colonne  champ="UnitPrice"  title="Prix"   />
      <Column  field="UnitsInStock"  title= "En stock"  />
      <Colonne  champ="Discontinued"  titre[19659107]="Discontinued"  />
    </Grid>
  ) ; 
  

  Ensuite, nous pouvons mettre à jour notre balisage pour qu'il soit :

  {GridElement}
  <GridPDFExport ref={pdfExportRef}>{GridElement}</GridPDFExport>
  

  Nous avons une nouvelle référence ici, pdfExportRef, que nous pouvons ajouter au début de notre fichier App.js où nous avons configuré tous nos crochets et autres.

  const pdfExportRef =[19659064]useRef(null);
  

  Une autre variable que nous devrions ajouter est quelque chose qui nous permet de savoir si nous exportons activement du contenu car nous devons désactiver le bouton d'exportation. Cela garantira que les utilisateurs ne cliquent pas plusieurs fois sur notre bouton d'exportation pour générer des fichiers PDF. Cela devient particulièrement important lorsque nous exportons de grands ensembles de données dont la génération peut prendre un certain temps. Nous inviterons également l'utilisateur à sélectionner où télécharger le fichier.

  const [isPdfExporting, setIsPdfExporting] = useState (faux);`
  

  Si nous regardons plus en détail notre nouveau balisage Grid, nous voyons que nous avons un élément de bouton dans notre barre d'outils Grid qui a besoin d'un gestionnaire d'événements.

  const onPdfExport = useCallback (() => {
    if (pdfExportRef.current) {
      setIsPdfExporting (vrai);
      pdfExportRef.current.save(processedData.data, onPdfExportDone);[19659175]}
  }, [processedData, onPdfExportDone]);
  

  Ce que nous faisons ici, c'est prendre notre référence Grid, mettre à jour que nous exportons du contenu, puis appeler la fonction .save() pour démarrer le processus d'exportation. Nous passons également onPdfExportDone pour nous donner un rappel auquel nous connecter et faire quelque chose après avoir généré notre fichier. Dans ce cas, il suffit de définir isPdfExporting sur false.

  const onPdfExportDone = useCallback(() = > {
    setIsPdfExporting(false);
  }, []);
  

  Si nous exécutons ce code dans son état actuel, nous pouvons commencer à générer des fichiers PDF React ! Cependant, ce que vous remarquerez, c'est que nous n'exportons que la page actuelle. Dans notre sens, nous n'obtenons que cinq éléments de données à chaque fois, de sorte que cette deuxième page n'est pas réellement exportée. Mettons à jour les choses pour couvrir ce scénario afin que nous puissions exporter toutes les données à la fois. exporter toutes les pages ou une seule page.

  <>
    <div  className="grid-export-area">
      <h1>Grid Export</h1>
      <Checkbox
         onChange={allPageChange}
        checked={allPageCheck}
        label={'Exporter toutes les pages'}
      />
    </div>
    {GridElement}
    <GridPDFExport  ref=[19659022]{pdfExportRef}>{GridElement}</GridPDFExport>
  </>
  

  Maintenant, nous avons juste besoin de définir allPageCheck où nous avons défini le reste de nos crochets.

  const [allPageCheck, setAllPageCheck]  = useState(false);
  

  Et l'événement allPageChange est assez simple, nous inversons simplement la variable actuellement définie.

  const  allPageChange = événement = > {
    setAllPageCheck(!allPageCheck);
  };
  

  La dernière étape consiste à mettre à jour onPdfExport pour vérifier si nous exportons toutes les lignes ou uniquement la page actuelle.

  const onPdfExport = useCallback(([19659022]) => {
    if (pdfExportRef.current) {
      setIsPdfExporting( true);
      if (allPageCheck) {
        pdfExportRef.current.save(data, onPdfExportDone);
      } else[19659030]{
        pdfExportRef.current.save(processedData.data, onPdfExportDone);[19659477]}
    }
  }, [données traitées, onPdfExportDone]);
  

  Remarquez que dans ce cas, nous appelons .save() et transmettons toutes les données plutôt que la variable processedData. Si nous avions des données supplémentaires sur le serveur, ce serait l'endroit où nous ferions une demande à notre backend et récupérerions toutes les données si nous n'avons pas toutes les données disponibles sur le client.

  Un morceau de code supplémentaire que nous devons ajouter à s'assurer que nous couvrons les cas extrêmes où les données traitées ne contiennent pas réellement de données :

  useEffect(() => {
    if ( !processedData.data.length) {
      setSkip(0)[19659022];
    }
    setData(gridSampleProducts);
  }, [processedData, données ]);
  

  Cela « réinitialisera » la page sur laquelle nous sommes sur la première page lorsqu'il n'y a pas de données disponibles, ce qui pourrait être le cas lorsque nous mettons à jour les données de la grille de manière dynamique lors de l'exportation. Essentiellement, lorsque nous exportons toutes les pages, cela devient le morceau de code qui nous permet de parcourir nos données et d'exporter chaque ligne. montre que tout est opérationnel.

  Avec tout cela, nous avons maintenant une grille de données qui peut générer un fichier PDF à partir de l'ensemble de données actuel ou de l'ensemble de données entier à la fois.

  Générer des fichiers PDF avec React TreeList

  La TreeList de KendoReact est très similaire à la grille de données React, je voulais donc inclure un exemple similaire pour la TreeList comme référence. Comme il nous a fallu un certain temps pour lancer le projet Grid et que la configuration TreeList est essentiellement la même que celle de Grid, au lieu de repasser chaque étape, je vous passe le relais : voici un projet StackBlitz montrant comment cela peut être fait pour la TreeList.

  PDF Toutes les choses !

  Ce billet de blog a couvert beaucoup de choses, alors résumons ce que nous avons fait.

  • Nous avons configuré une grille de données KendoReact avec un exemple d'ensemble de données.
  • Nous avons configuré la grille de données pour permettre la pagination, en gérant la façon de paginer en avant et en arrière à l'aide de skip and take.
  • Nous avons utilisé la bibliothèque de traitement PDF KendoReact pour exporter la page actuelle de la table de données vers un fichier PDF.[19659004]Nous avons ajouté une case à cocher pour sélectionner si le rendu PDF à partir d'un tableau de données doit inclure uniquement la page actuelle ou toutes les données disponibles.
  • Enfin, nous avons vu un exemple sur la façon de générer un fichier PDF à partir d'un composant React Tree Grid également. !

  Entre Générer un PDF dans React : aussi simple que 1- 2-3 , Génération de PDF à partir de HTML dans React Demo : Exporting Invoiceset cet article de blog, vous avez maintenant une bonne idée de la puissance de la bibliothèque KendoReact PDF Generator peut être. Au-delà du simple HTML, nous pouvons générer des fichiers PDF à partir de nos applications React avec des scénarios plus complexes comme des factures et même des composants de données avancés comme les composants KendoReact Data Grid et TreeList !

  Si vous aimez ce que vous avez vu jusqu'à présent, la prochaine étape serait d'apprendre à connaître KendoReactnos composants professionnels d'interface utilisateur React et notre bibliothèque de visualisation de données. Construit à partir de zéro pour React, KendoReact fonctionne bien avec n'importe quelle UIstack existante. Ses plus de 90 composants personnalisables et riches en fonctionnalités, y compris la capacité d'exportation PDF que vous venez de lire, en font la base idéale pour votre bibliothèque d'interface utilisateur interne.

  Essayez KendoReact maintenant