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

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.

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 :

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

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

3. html2canvas : Cette bibliothèque permet de réaliser une capture d'écran d'un élément HTML et de la 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 HTML en PDF dans React, voyons rapidement comment créer une nouvelle application React à l'aide de 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 à partir du site web site web officiel.

É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

Étape 3 Créer une nouvelle application React

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

create-react-app my-pdf-app

Cette commande génère 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

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

Maintenant que vous avez mis en place une application React, vous pouvez suivre les étapes décrites dans les sections précédentes de cet article pour mettre en œuvre la conversion HTML vers PDF React en utilisant des 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, citons la prise en charge des feuilles de style en ligne et externes, la génération de PDF multipages, le stylisme 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 devez installer le paquet React-pdf :

npm install --save @React-pdf/renderer

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;

Vous pouvez maintenant 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;

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.

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

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

Mise en forme des fichiers PDF

La bibliothèque React-pdf prend en charge un large éventail d'options de style, similaires aux 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, "gauche", "droite", "centre" ou "justifier").
• margin : Définit la marge autour d'un élément.
• padding : Définit l'espacement à l'intérieur d'un élément.
• border : Définit la bordure autour d'un élément.
• backgroundColor : Définit la couleur d'arrière-plan 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ée par IronSoftware, il s'agit d'une puissante bibliothèque qui permet aux développeurs de générer et de manipuler des documents PDF directement depuis 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 :

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

  npm install @ironsoftware/ironpdf

2. 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;

3. 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 Chaînes HTML, URLou images vers les PDF.

4. 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;

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 HTML en PDF dans React en utilisant la bibliothèque React-pdf. Nous avons abordé les bibliothèques populaires pour la génération de PDF, comment créer et styliser des fichiers PDF à l'aide de 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 offre un service de essai gratuitqui vous permet de tester la bibliothèque et de déterminer si elle répond à vos besoins avant de vous engager dans un achat. Après la période d'essai, IronPDF licences démarrer à partir de $749, qui inclut le support prioritaire et les mises à jour. En outre, il est également disponible pour d'autres langues telles que C# .NET, Java et Python. Télécharger la bibliothèque à partir de ici et l'essayer.