OUTILS PDF

Comment convertir HTML en PDF avec React (Tutoriel du développeur)

Kannapat Udonpant

mai 16, 2023

La conversion de HTML en PDF dans React est devenue une fonctionnalité essentielle pour de nombreuses applications web. Que vous construisiez un système de facturation, un générateur de rapports ou que vous ayez simplement besoin de partager des informations dans un format universellement accepté, la génération de PDF est cruciale. Dans cet article, nous allons explorer comment créer et styliser des fichiers PDF dans votre application React en convertissant du HTML en PDF à l'aide de bibliothèques populaires.

Comment convertir HTML en PDF avec React

Créer et configurer un projet React
Téléchargez la bibliothèque pour convertir du HTML en PDF dans React en utilisant npm
Importer les modules nécessaires de React-pdf/renderer
Configurer la page HTML avec les modules importés
Utilisez le module PDFDownloadLink de React-pdf pour convertir le HTML en PDF

Bibliothèques populaires pour la génération de PDF

Avant de plonger dans le processus de conversion de HTML en PDF, discutons de quelques bibliothèques populaires que vous pouvez utiliser pour la génération de PDF dans vos applications React :

React-pdf : Une bibliothèque puissante pour créer des documents PDF dans les applications React. Il prend en charge diverses options de style et permet de créer facilement des PDF complexes et multipages.
jsPDF : Une bibliothèque JavaScript largement utilisée pour générer des fichiers PDF à la volée. Il offre un large éventail de fonctionnalités, notamment la mise en forme du texte, l'intégration d'images, etc.
html2canvas : Cette bibliothèque vous permet de capturer une capture d'écran d'un élément HTML et de le convertir en un objet canvas, qui peut ensuite être converti en PDF à l'aide d'autres bibliothèques comme jsPDF.

Conditions préalables à la conversion de HTML en PDF dans React

Familiarité avec React et son écosystème

Avant de se plonger dans la conversion HTML en PDF, il est crucial d'avoir une solide compréhension de React. Cela inclut la connaissance de JSX, de la gestion des états, des cycles de vie des composants et des crochets.

Compréhension de HTML, CSS et JavaScript

Des bases solides en HTML, CSS et JavaScript sont essentielles pour travailler avec la bibliothèque React-pdf. Cela inclut la connaissance des éléments et attributs HTML, des styles et sélecteurs CSS et des principes fondamentaux de JavaScript tels que les variables, les fonctions et les boucles.

Démarrer avec une application React

Avant de procéder à la conversion de HTML en PDF dans React, passons rapidement en revue comment créer une nouvelle application React en utilisant l'outil CLI populaire create-react-app. Ceci servira de base à notre exemple de génération de PDF.

Étape 1 Installer Node.js

Assurez-vous que Node.js est installé sur votre machine. Vous pouvez télécharger la dernière version de Node.js depuis le site officiel de Node.js.

Étape 2 Installer create-react-app

create-react-app est un outil CLI largement utilisé pour générer des applications React. Installez-le globalement à l'aide de la commande suivante :

npm install -g create-react-app

Comment convertir HTML en PDF dans React (Tutoriel pour développeurs) : Figure 1 - Créer une application react

Étape 3 Créer une nouvelle application React

Maintenant que vous avez create-react-app installé, vous pouvez créer une nouvelle application React avec la commande suivante :

create-react-app my-pdf-app

Comment convertir HTML en PDF dans React (Tutoriel pour développeurs) : Figure 2 - Création d'une nouvelle application React

Cette commande va générer une nouvelle application React dans un dossier appelé my-pdf-app. Déplacez-vous dans le répertoire nouvellement créé :

cd my-pdf-app

Étape 4 Démarrer le serveur de développement

Pour démarrer le serveur de développement et voir votre nouvelle application React en action, exécutez la commande suivante :

npm start

Comment convertir HTML en PDF dans React (Tutoriel pour développeur) : Figure 3 - Application React en cours d'exécution sur localhost

Étape 5 : Mise en œuvre de la génération de PDF

Maintenant que vous avez configuré une application React, vous pouvez suivre les étapes décrites dans les sections précédentes de cet article pour implémenter la conversion de HTML en PDF React à l'aide de bibliothèques populaires comme React-pdf.

Présentation de la bibliothèque React-pdf

React-pdf est une bibliothèque populaire conçue spécifiquement pour les applications React, offrant une intégration transparente avec l'écosystème React. Parmi ses principales fonctionnalités figurent la prise en charge du CSS interne et externe, la génération de PDF multi-pages, le style avancé, et la compatibilité avec le rendu côté serveur (SSR).

Créer des fichiers PDF avec React-pdf

Dans cette section, nous allons nous concentrer sur l'utilisation de React-pdf pour créer des fichiers PDF dans une application React. Pour commencer, vous devrez installer le paquet React-pdf :

npm install --save @React-pdf/renderer

Comment convertir HTML en PDF dans React (Tutoriel développeur) : Figure 4 - Paquet React-pdf

Une fois installé, vous pouvez créer un nouveau composant React pour définir la structure de votre document PDF :

    import React from "react";
    import {
      Document,
      Page,
      Text,
      View,
      StyleSheet,
      Image,
      Font,
    } from "@React-pdf/renderer";
    const invoiceData = {
      sender: {
        name: "John Doe",
        address: "123 Main Street",
        city: "New York",
        state: "NY",
        zip: "10001",
      },
      recipient: {
        name: "Jane Smith",
        address: "456 Elm Street",
        city: "San Francisco",
        state: "CA",
        zip: "94107",
      },
      items: [
        { description: "Item 1", quantity: 2, unitPrice: 10 },
        { description: "Item 2", quantity: 3, unitPrice: 15 },
        { description: "Item 3", quantity: 1, unitPrice: 20 },
      ],
      invoiceNumber: "INV-123456",
      date: "April 26, 2023",
    };
    const styles = StyleSheet.create({
      page: {
        backgroundColor: "#FFF",
        padding: 30,
      },
      header: {
        fontSize: 24,
        textAlign: "center",
        marginBottom: 30,
      },
      sender: {
        marginBottom: 20,
      },
      recipient: {
        marginBottom: 30,
      },
      addressLine: {
        fontSize: 12,
        marginBottom: 2,
      },
      itemsTable: {
        display: "table",
        width: "100%",
        borderStyle: "solid",
        borderWidth: 1,
        borderRightWidth: 0,
        borderBottomWidth: 0,
      },
      tableRow: {
        margin: "auto",
        flexDirection: "row",
      },
      tableColHeader: {
        width: "25%",
        borderStyle: "solid",
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
        backgroundColor: "#F0F0F0",
      },
      tableCol: {
        width: "25%",
        borderStyle: "solid",
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
      },
      tableCell: {
        fontSize: 12,
        textAlign: "center",
        padding: 5,
      },
      total: {
        marginTop: 20,
        textAlign: "right",
      },
      totalLabel: {
        fontSize: 14,
        fontWeight: "bold",
      },
      totalValue: {
        fontSize: 14,
      },
    });

    const InvoiceDocument = () => {
      const totalAmount = invoiceData.items.reduce(
        (total, item) => total + item.quantity * item.unitPrice,
        0
      );

      return (

            Invoice

              {invoiceData.sender.name}
              {invoiceData.sender.address}

                {invoiceData.sender.city}, {invoiceData.sender.state}{" "}
                {invoiceData.sender.zip}

              {invoiceData.recipient.name}

                {invoiceData.recipient.address}

                {invoiceData.recipient.city}, {invoiceData.recipient.state}{" "}
                {invoiceData.recipient.zip}

                  Description

                  Quantity

                  Unit Price

                  Amount

              {invoiceData.items.map((item, index) => (

                    {item.description}

                    {item.quantity}

                      {item.unitPrice.toFixed(2)}

                      {(item.quantity * item.unitPrice).toFixed(2)}

              ))}

              Total:
              ${totalAmount.toFixed(2)}

      );
    };

    export default InvoiceDocument;

    import React from "react";
    import {
      Document,
      Page,
      Text,
      View,
      StyleSheet,
      Image,
      Font,
    } from "@React-pdf/renderer";
    const invoiceData = {
      sender: {
        name: "John Doe",
        address: "123 Main Street",
        city: "New York",
        state: "NY",
        zip: "10001",
      },
      recipient: {
        name: "Jane Smith",
        address: "456 Elm Street",
        city: "San Francisco",
        state: "CA",
        zip: "94107",
      },
      items: [
        { description: "Item 1", quantity: 2, unitPrice: 10 },
        { description: "Item 2", quantity: 3, unitPrice: 15 },
        { description: "Item 3", quantity: 1, unitPrice: 20 },
      ],
      invoiceNumber: "INV-123456",
      date: "April 26, 2023",
    };
    const styles = StyleSheet.create({
      page: {
        backgroundColor: "#FFF",
        padding: 30,
      },
      header: {
        fontSize: 24,
        textAlign: "center",
        marginBottom: 30,
      },
      sender: {
        marginBottom: 20,
      },
      recipient: {
        marginBottom: 30,
      },
      addressLine: {
        fontSize: 12,
        marginBottom: 2,
      },
      itemsTable: {
        display: "table",
        width: "100%",
        borderStyle: "solid",
        borderWidth: 1,
        borderRightWidth: 0,
        borderBottomWidth: 0,
      },
      tableRow: {
        margin: "auto",
        flexDirection: "row",
      },
      tableColHeader: {
        width: "25%",
        borderStyle: "solid",
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
        backgroundColor: "#F0F0F0",
      },
      tableCol: {
        width: "25%",
        borderStyle: "solid",
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
      },
      tableCell: {
        fontSize: 12,
        textAlign: "center",
        padding: 5,
      },
      total: {
        marginTop: 20,
        textAlign: "right",
      },
      totalLabel: {
        fontSize: 14,
        fontWeight: "bold",
      },
      totalValue: {
        fontSize: 14,
      },
    });

    const InvoiceDocument = () => {
      const totalAmount = invoiceData.items.reduce(
        (total, item) => total + item.quantity * item.unitPrice,
        0
      );

      return (

            Invoice

              {invoiceData.sender.name}
              {invoiceData.sender.address}

                {invoiceData.sender.city}, {invoiceData.sender.state}{" "}
                {invoiceData.sender.zip}

              {invoiceData.recipient.name}

                {invoiceData.recipient.address}

                {invoiceData.recipient.city}, {invoiceData.recipient.state}{" "}
                {invoiceData.recipient.zip}

                  Description

                  Quantity

                  Unit Price

                  Amount

              {invoiceData.items.map((item, index) => (

                    {item.description}

                    {item.quantity}

                      {item.unitPrice.toFixed(2)}

                      {(item.quantity * item.unitPrice).toFixed(2)}

              ))}

              Total:
              ${totalAmount.toFixed(2)}

      );
    };

    export default InvoiceDocument;

JAVASCRIPT

Maintenant, vous pouvez utiliser le composant PDFDownloadLink de React-pdf pour télécharger le fichier PDF généré :

    import React from 'react';
    import { PDFDownloadLink } from '@React-pdf/renderer';
    import InvoiceDocument from './InvoiceDocument';
    import './App.css';

    const App = () => (

          {({ blob, url, loading, error }) =>
            loading ? 'Loading document...' : 'Download Invoice'
          }

    );

    export default App;

    import React from 'react';
    import { PDFDownloadLink } from '@React-pdf/renderer';
    import InvoiceDocument from './InvoiceDocument';
    import './App.css';

    const App = () => (

          {({ blob, url, loading, error }) =>
            loading ? 'Loading document...' : 'Download Invoice'
          }

    );

    export default App;

JAVASCRIPT

Ajoutez maintenant quelques styles CSS dans App.css pour une interface utilisateur personnalisée :


    .app-container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #d1e8ff;
    }

    .download-button {
      display: inline-block;
      background-color: #5a8fd5;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      padding: 12px 24px;
      border-radius: 4px;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .download-button:hover {
      background-color: #3a68b7;
    }

Ouvrez localhost:3000 dans votre navigateur.

Comment convertir du HTML en PDF dans React (Tutoriel pour développeurs) : Figure 5 - PDF React s'exécutant en localhost

Lorsque vous cliquez sur le bouton Télécharger, le fichier PDF est téléchargé.

Comment convertir HTML en PDF dans React (Tutoriel pour développeurs) : Figure 6 - Facture téléchargée

Voici le résultat du fichier PDF à partir du document HTML :

Comment convertir HTML en PDF dans React (Tutoriel pour développeurs) : Figure 7 - Sortie du document

Mise en forme des fichiers PDF

La bibliothèque React-pdf prend en charge un large éventail d'options de style, similaires à CSS. Voici quelques propriétés de style courantes que vous pouvez utiliser pour personnaliser l'apparence de vos fichiers PDF :

color : Définit la couleur du texte.
fontSize : Définit la taille de la police du texte.
fontFamily : Définit la famille de polices du texte.
textAlign : Définit l'alignement du texte (par exemple, 'left', 'right', 'center', ou 'justify').
margin : Définit la marge autour d'un élément.
padding : Définit le rembourrage à l'intérieur d'un élément.
border : Définit la bordure autour d'un élément.
backgroundColor : Définit la couleur de fond d'un élément.

Bibliothèque PDF alternative pour les développeurs React

IronPDF for Node.js est une excellente alternative pour la conversion de HTML en PDF dans react. Développé par Iron Software, il s'agit d'une bibliothèque puissante qui permet aux développeurs de générer et de manipuler des documents PDF directement à partir de leurs applications Node.js. L'une des principales caractéristiques d'IronPDF est sa capacité à gérer l'exécution de JavaScript dans le contenu HTML pendant la génération du PDF, ce qui permet de créer des PDF dynamiques et interactifs.

Grâce à la prise en charge de diverses plateformes, notamment Windows, macOS, Linux, Docker et des plateformes cloud comme Azure et AWS, IronPDF garantit une compatibilité multiplateforme. Son API conviviale permet aux développeurs d'intégrer rapidement la génération et la manipulation de PDF dans leurs projets Node.js.

React est une bibliothèque JavaScript pour la construction d'interfaces utilisateur, et comme IronPDF est construit pour Node.js, vous pouvez intégrer IronPDF dans vos applications React en utilisant son API Node.js.

Voici un aperçu de la façon dont vous pouvez utiliser IronPDF avec React :

Installez IronPDF : Vous pouvez installer IronPDF dans votre projet React en utilisant npm ou yarn.

  npm install @ironsoftware/ironpdf

Intégration aux composants React : Vous pouvez créer des composants React qui utilisent IronPDF pour générer et manipuler des PDF. Par exemple, vous pouvez avoir un composant qui prend un contenu HTML en entrée et le convertit en PDF à l'aide de l'API d'IronPDF.

  import React from 'react';
  import { PdfDocument } from '@ironsoftware/ironpdf';

  const HTMLToPDFComponent = () => {
      const convertHTMLToPDF = async (htmlContent) => {
          try {
              const pdf = await PdfDocument.fromHtml(htmlContent);
              await pdf.saveAs('generated_pdf.pdf');
              alert('PDF generated successfully!');
          } catch (error) {
              console.error('Error generating PDF:', error);
          }
      };

      return (
          <div>
              {/* Input HTML content */}
              <textarea onChange={(e) => convertHTMLToPDF(e.target.value)} />
          </div>
      );
  };

  export default HTMLToPDFComponent;

  import React from 'react';
  import { PdfDocument } from '@ironsoftware/ironpdf';

  const HTMLToPDFComponent = () => {
      const convertHTMLToPDF = async (htmlContent) => {
          try {
              const pdf = await PdfDocument.fromHtml(htmlContent);
              await pdf.saveAs('generated_pdf.pdf');
              alert('PDF generated successfully!');
          } catch (error) {
              console.error('Error generating PDF:', error);
          }
      };

      return (
          <div>
              {/* Input HTML content */}
              <textarea onChange={(e) => convertHTMLToPDF(e.target.value)} />
          </div>
      );
  };

  export default HTMLToPDFComponent;

JAVASCRIPT

Gérer la génération de PDF : Utilisez la fonctionnalité d'IronPDF au sein de vos composants React pour gérer la génération, la manipulation et l'enregistrement de PDF. Vous pouvez utiliser les méthodes d'IronPDF pour convertir des chaînes HTML, des URLs ou des images en PDF.
Rendre les PDF : Une fois que vous avez généré des PDF à l'aide d'IronPDF, vous pouvez les rendre au sein de votre application React à l'aide de composants ou de bibliothèques appropriés pour l'affichage de documents PDF.

  import React from 'react';

  const PDFViewerComponent = () => {
      return (
          <div>
              {/* Render PDF using appropriate component or library */}
              <iframe src="generated_pdf.pdf" width="100%" height="600px" title="PDF Viewer" />
          </div>
      );
  };

  export default PDFViewerComponent;

  import React from 'react';

  const PDFViewerComponent = () => {
      return (
          <div>
              {/* Render PDF using appropriate component or library */}
              <iframe src="generated_pdf.pdf" width="100%" height="600px" title="PDF Viewer" />
          </div>
      );
  };

  export default PDFViewerComponent;

JAVASCRIPT

Avec IronPDF, les développeurs peuvent générer efficacement des documents PDF de qualité professionnelle à partir de diverses sources, les personnaliser pour répondre à leurs besoins spécifiques et intégrer de manière transparente des capacités de génération de PDF dans leurs applications .NET. IronPDF prend également en charge des fonctions avancées telles que CSS, JavaScript et les polices personnalisées, ce qui garantit que les fichiers PDF générés correspondront à la conception et aux exigences de votre application.

Conclusion

Dans cet article, nous avons couvert le processus de conversion de HTML en PDF dans React en utilisant la bibliothèque React-pdf. Nous avons discuté des bibliothèques populaires pour la génération de PDF, comment créer et styliser des fichiers PDF en utilisant React-pdf, et des options supplémentaires pour générer des documents PDF plus complexes.

En suivant ce guide, vous devriez maintenant avoir une solide compréhension de la façon de générer des fichiers PDF dans vos applications React, ce qui vous permettra de générer des PDF de haute qualité et de répondre aux besoins de divers cas d'utilisation.

IronPDF propose une version d'essai gratuite, qui vous permet de tester la bibliothèque et de déterminer si elle répond à vos besoins avant de confirmer un achat. Après la période d'essai, les licences d'achat d'IronPDF commencent à partir de $749, ce qui inclut le support prioritaire et les mises à jour. De plus, IronPDF est disponible pour d'autres langages comme le C# .NET, Java, et Python. Téléchargez la bibliothèque IronPDF en commençant par IronPDF pour Node.js et essayez-la.

Kannapat Udonpant

Discutez avec l'équipe d'ingénierie maintenant

Ingénieur logiciel

Avant de devenir ingénieur logiciel, Kannapat a obtenu un doctorat en ressources environnementales à l'université d'Hokkaido au Japon. Tout en poursuivant ses études, Kannapat est également devenu membre du Vehicle Robotics Laboratory, qui fait partie du Department of Bioproduction Engineering (département d'ingénierie de la bioproduction). En 2022, il a mis à profit ses compétences en C# pour rejoindre l'équipe d'ingénieurs d'Iron Software, où il se concentre sur IronPDF. Kannapat apprécie son travail car il apprend directement auprès du développeur qui écrit la majeure partie du code utilisé dans IronPDF. Outre l'apprentissage par les pairs, Kannapat apprécie l'aspect social du travail chez Iron Software. Lorsqu'il n'écrit pas de code ou de documentation, Kannapat peut généralement être trouvé en train de jouer sur sa PS5 ou de revoir The Last of Us.

< PRÉCÉDENT
Comment imprimer un fichier PDF en JavaScript