Fermer

avril 8, 2021

Générer un PDF dans React: aussi simple que 1-2-3!


La génération d'un fichier PDF dans une application React peut-elle être vraiment simple? Avec KendoReact, OUI!

Une question courante que je vois apparaître dans les communautés React est de savoir comment exporter du HTML, ou des parties de votre application React, au format PDF. Normalement, cela peut être un peu fastidieux, mais je suis ici pour vous dire que, grâce à KendoReact, nous pouvons désormais exporter tout le contenu de nos applications React aussi facilement que 1-2-3!

Le billet de blog d'aujourd'hui est le premier d'une série en trois parties qui explique comment générer un PDF à partir de HTML dans React. Comme il s'agit de la partie 1, nous allons commencer aujourd'hui par créer une application rapide à exporter, ajouter notre bibliothèque React PDF Generator et voir comment générer un fichier PDF à partir de HTML dans React.

0. Vous préférez la vidéo? I Got You Covered

Au cas où vous préférez apprendre à travers des vidéos plutôt que de lire des articles de blog, j'ai enregistré une série de vidéos expliquant comment générer des PDF dans les applications React. N'hésitez pas à consulter la partie 1 de la série vidéo ici .

1. Créez votre application React

Cela peut paraître évident, mais pour exporter quelque chose au format PDF, vous devez d'abord avoir ce quelque chose! Comme vous êtes tombé sur cet article, je pense que vous avez déjà un ensemble d'exigences, mais pour ceux d'entre vous curieux, voici quelques scénarios courants que j'ai vu que les gens doivent exporter des applications React au format PDF:

  • Exporter des tableaux de bord ou des collections de KPIs to PDF
  • Exporter les factures créées en HTML vers PDF
  • Exporter tout ou partie des données des Data Grids
  • Advanced: Exporter les contrats signés électroniquement au PDF

Il existe bien sûr des tonnes de scénarios supplémentaires , mais ce ne sont que quelques-uns dont j'ai discuté avec les développeurs de React au fil des ans.

Pour ce billet de blog, je vais garder les choses simples. Avant de commencer, je vais lancer un lien vers le dépôt GitHub suivant . Pour cet article de blog, nous examinerons le composant ExportExample dans le projet GitHub. Cela contiendra tout ce dont je parle aujourd'hui, puis certains (gardez un œil sur plus de contenu autour de ce projet!). Pour ceux d'entre vous qui suivent ce code source, nous allons examiner le composant ExportExample .

Avant de sauter dans le HTML et le CSS qui composent mon composant, je veux juste noter que ceci L'exemple présente les types de HTML suivants et les exporte au format PDF:

  • Éléments HTML standard tels que

    etc.

  • Composants qui ont un style CSS personnalisé séparé des autres contenus
  • Composants avancés de l'interface utilisateur React comme les composants KendoReact

Pour lancer les choses, je viens de configurer un nouveau projet à l'aide de create-react-app.

Tout ce que vous devez suivre est le code HTML suivant:

KendoReact Traitement PDF

 Kendo UI Kendoka

Ceci est un exemple de texte qui peut être stylisé

Pour l'image, j'ai ajouté l'image suivante et je l'ai définie comme kendoka variable ci-dessus.

 KendoReact Kendoka, un guerrier d'art martial japonais illustré hol

Et voici notre CSS que nous pouvons ajouter à notre App.css :

 .app-content {
  text-align: centre;
  couleur d'arrière-plan: # 282c34;
  hauteur min: 100vh;
  affichage: flex;
  flex-direction: colonne;
  align-items: centre;
  justify-content: centre;
  taille de la police: calc (10px + 2vmin);
  Couleur blanche;
}

.page-container {
  marge: 1em;
}

.neat-style {
  couleur: rgb (255, 142, 166);
  poids de la police: gras;
  texte-décoration: souligné;
}

bouton .button-area {
  marge droite: 10px;
}

.k-pdf-export {
  couleur d'arrière-plan: # 282c34;
}

Maintenant que nous avons notre HTML et notre CSS, passons à l'étape suivante et ajoutons KendoReact PDF Processing!

2. Ajouter le traitement PDF KendoReact

Pour commencer à générer un PDF dans les applications React, tout ce que nous avons à faire est de se diriger vers la section de documentation de KendoReact PDF Generator . Cela vous donne les instructions pour installer le générateur de PDF KendoReact, et il contient également tous les articles de documentation dont vous avez besoin pour commencer et plonger plus profondément dans le monde de la génération React PDF côté client – je vous recommande fortement de le mettre en signet!

Cela étant dit, la principale information qui nous intéresse est la commande npm suivante:

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

Une note rapide: Vous avez peut-être remarqué le paquet @ progress / kendo-licensing inclus ici. KendoReact est une bibliothèque de composants d'interface utilisateur commerciale et dans ce cadre, vous devrez fournir une clé de licence lorsque vous utilisez les composants dans vos projets React. Vous pouvez obtenir une clé de licence via un essai gratuit ou en possédant une licence commerciale. Pour plus d'informations, vous pouvez vous rendre sur la page Licences KendoReact .

Avec cela à l'écart, nous sommes prêts à passer à l'exportation. C’est vrai – nous sommes techniquement prêts à faire du rock and roll. Au minimum, tout ce dont nous avons besoin est d'ajouter ce package unique et une seule instruction d'importation dans notre application et nous pouvons passer à l'étape suivante. Vraiment, c’est tout ce dont nous avons besoin! Un seul paquet et vous pouvez passer directement à l'étape 3.

Cependant, je veux aussi prendre ce temps pour importer un composant supplémentaire, à savoir le composant KendoReact Button . C'est simplement parce que j'aime l'aspect et la sensation du bouton KendoReact. Dans ce cadre, j'ai également installé l'un des thèmes KendoReact pour aider à l'aspect général desdits boutons et de tous les futurs composants de KendoReact. Dans ce cas, j'ai ajouté le thème KendoReact Material . Si cette étape partielle vous intéresse ou si vous souhaitez l'inclure vous-même, vous pouvez suivre les instructions d'installation dans l'article de documentation lié.

Avant de vous montrer comment exporter votre application React au format PDF (étape 3) , Je vais vous lancer un nouveau balisage HTML. Cela inclut quelques nouveaux boutons KendoReact et juste un élément supplémentaire

donc rien de trop fou.

Traitement PDF KendoReact

 Kendo UI Kendoka

Ceci est un exemple de texte qui peut être stylé [19659043] Exporter avec le composant

Si vous avez suivi jusqu'à présent, tout ce que vous avez à faire est de copier et coller tout ce qui précède dans votre propre projet et vous serez prêt à partir!

3. Exporter au format PDF

Maintenant que tout est installé, arrivons à un point où nous pouvons exporter du contenu! Tout d'abord, assurons-nous d'importer la bibliothèque KendoReact PDF Generator dans notre composant React approprié:

 import {PDFExport, savePDF} depuis '@ progress / kendo-react-pdf'; 

Les deux éléments que nous avons importés représentent ici deux méthodes d'exportation: PDFExport exporte le contenu en tant que composant, et savePDF est utilisé lorsque nous voulons exporter des choses via une méthode. Plongeons dans chaque approche!

3a. Générer un PDF via un composant

Tout ce que nous avons à faire pour exporter du contenu via la route des composants est de trouver le contenu que nous voulons exporter et d'envelopper le HTML avec les balises . Vous n'avez pas besoin d'envelopper toute votre application React – juste le contenu qui doit être exporté.

Pour vous donner une idée de ce à quoi cela ressemble, voici notre précédent HTML enveloppé de manière appropriée:

KendoReact PDF Processing

 Kendo UI Kendoka

Voici un exemple de texte qui peut être de style

Vous avez peut-être remarqué deux choses ci-dessus: la première est que nous définissons une référence à ce composant via l'accessoire ref de React, nous avons donc ref = {pdfExportComponent} et nous aussi définissez paperSize sur A4. Le format de papier peut être défini à la fois via le même accessoire que celui que je montre ici, ou même via CSS (plus d'informations à ce sujet dans un prochain article de blog), mais comme A4 est le format de papier le plus basique, je l'ai simplement ajouté ici. [19659003] Maintenant que nous avons défini la zone que nous voulons exporter, allons-y et exportons le contenu en un clic! Tout d'abord, nous allons définir notre gestionnaire d'événements onClick :

 

Ensuite, voici notre gestionnaire réel:

 const handleExportWithComponent = (event) => {
    pdfExportComponent.current.save ();
}

Ce que nous faisons ici, c'est saisir la variable ref que nous avons définie comme référence à nos balises . De là, nous utilisons l'API disponible pour appeler .save () et notre contenu sera exporté!

3b. Générer un PDF via la méthode

Semblable à l'approche des composants ci-dessus, l'exportation via une méthode nécessite de définir un élément HTML parent qui doit contenir tout le contenu qui est configuré pour être exporté. Le moyen le plus rapide pour ce faire est de définir un élément

avec un accessoire ref . Bien sûr, nous avons également besoin d'un bouton responsable de l'exportation au clic, nous allons donc l'ajouter ici également.

En développant le HTML que nous avons jusqu'à présent, nous avons:

KendoReact PDF Processing

 Kendo UI Kendoka

Ceci est un exemple de texte qui peut être de style </ span

Ensuite, dans notre gestionnaire d'événements, nous avons le code suivant:

 const handleExportWithFunction = (event) => {
  savePDF (contentArea.current, {paperSize: "A4"});
}

Ce morceau de code appelle la méthode savePDF de React PDF Generator et passe le HTML via contentArea.current avec un objet reflétant les options que nous voulons définir pour le fichier que nous exportons. Dans ce cas, je ne règle que l'option paperSize pour vous montrer à quoi tout cela ressemble par rapport à l'approche déclarative et par composant, mais vous avez une énorme liste d'options à votre disposition que vous pouvez personnaliser!

Étape 4. ??? & Étape 5. Profit

C'est tout ce qu'il y a à faire! Dans les deux cas, vous savez maintenant comment générer un fichier PDF à partir de HTML dans React. Que vous préfériez l'approche déclarative de l'habillage autour de votre contenu, ou si vous souhaitez simplement transmettre un bloc de HTML en tant que contenu à une méthode, la puissance de React PDF Generator est que tout le contenu peut être exporté à l'aide de ces deux éléments simples.

Dans la partie 2 de cette série, nous allons créer une mise en page HTML et CSS plus avancée et voir comment nous pouvons personnaliser la taille de la mise en page du fichier PDF généré via CSS et même le faire de manière dynamique!




Source link