OUTILS PDF

Comment convertir HTML en PDF en React (Tutoriel pour Développeurs)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Darrius Serrant

Mis à jour:juillet 28, 2025

Converting HTML to PDF in React

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.

class="hsg-featured-snippet">

Comment convertir HTML en PDF dans React

Créer et configurer un projet React
Télécharger la bibliothèque pour convertir HTML en PDF dans React à l'aide de npm
Importer les modules nécessaires depuis React-pdf/renderer
Configurer la page HTML avec les modules importés
Utiliser 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. Elle prend en charge diverses options de style et peut créer facilement des PDF complexes à plusieurs pages.
jsPDF : Une bibliothèque JavaScript largement utilisée pour générer des fichiers PDF à la volée. Elle offre une large gamme de fonctionnalités, y compris le style de texte, l'intégration d'images, et plus.
html2canvas : Cette bibliothèque vous permet de capturer 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.

Prérequis pour la conversion de HTML en PDF dans React

Familiarité avec React et son écosystème

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

Compréhension de HTML, CSS et JavaScript

Une solide base en HTML, CSS et JavaScript est essentielle pour travailler avec la bibliothèque React-pdf. Cela inclut la connaissance des éléments et attributs HTML, du style CSS et des sélecteurs, et des fondamentaux de JavaScript tels que les variables, fonctions, et boucles.

Commencer avec une application React

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

Étape 1 Installer Node.js

Assurez-vous d'avoir installé Node.js 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 en utilisant la commande suivante :

npm install -g create-react-app

npm install -g create-react-app

SHELL

Étape 3 Créer une nouvelle application React

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

create-react-app my-pdf-app

create-react-app my-pdf-app

SHELL

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

cd my-pdf-app

cd my-pdf-app

SHELL

É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

npm start

SHELL

Étape 5 Mettre en œuvre 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 mettre en œuvre la conversion de HTML en 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. Certaines de ses fonctionnalités clés incluent la prise en charge du CSS en ligne 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 nous concentrerons 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

npm install --save @react-pdf/renderer

SHELL

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
} from '@react-pdf/renderer';

// Sample invoice data
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",
};

// Define styles for PDF document
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 = () => {
  // Calculate total amount
  const totalAmount = invoiceData.items.reduce(
    (total, item) => total + item.quantity * item.unitPrice,
    0
  );

  return (
    <Document>
      <Page style={styles.page}>
        <Text style={styles.header}>Invoice</Text>
        <View style={styles.sender}>
          <Text>{invoiceData.sender.name}</Text>
          <Text>{invoiceData.sender.address}</Text>
          <Text>
            {invoiceData.sender.city}, {invoiceData.sender.state} {invoiceData.sender.zip}
          </Text>
        </View>
        <View style={styles.recipient}>
          <Text>{invoiceData.recipient.name}</Text>
          <Text>{invoiceData.recipient.address}</Text>
          <Text>
            {invoiceData.recipient.city}, {invoiceData.recipient.state} {invoiceData.recipient.zip}
          </Text>
        </View>
        <View style={styles.itemsTable}>
          <View style={styles.tableRow}>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Description</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Quantity</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Unit Price</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Amount</Text>
          </View>
          {invoiceData.items.map((item, index) => (
            <View key={index} style={styles.tableRow}>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.description}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.quantity}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.unitPrice.toFixed(2)}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>
                {(item.quantity * item.unitPrice).toFixed(2)}
              </Text>
            </View>
          ))}
        </View>
        <View style={styles.total}>
          <Text style={styles.totalLabel}>Total: ${totalAmount.toFixed(2)}</Text>
        </View>
      </Page>
    </Document>
  );
};

export default InvoiceDocument;

import React from 'react';
import {
  Document,
  Page,
  Text,
  View,
  StyleSheet
} from '@react-pdf/renderer';

// Sample invoice data
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",
};

// Define styles for PDF document
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 = () => {
  // Calculate total amount
  const totalAmount = invoiceData.items.reduce(
    (total, item) => total + item.quantity * item.unitPrice,
    0
  );

  return (
    <Document>
      <Page style={styles.page}>
        <Text style={styles.header}>Invoice</Text>
        <View style={styles.sender}>
          <Text>{invoiceData.sender.name}</Text>
          <Text>{invoiceData.sender.address}</Text>
          <Text>
            {invoiceData.sender.city}, {invoiceData.sender.state} {invoiceData.sender.zip}
          </Text>
        </View>
        <View style={styles.recipient}>
          <Text>{invoiceData.recipient.name}</Text>
          <Text>{invoiceData.recipient.address}</Text>
          <Text>
            {invoiceData.recipient.city}, {invoiceData.recipient.state} {invoiceData.recipient.zip}
          </Text>
        </View>
        <View style={styles.itemsTable}>
          <View style={styles.tableRow}>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Description</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Quantity</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Unit Price</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Amount</Text>
          </View>
          {invoiceData.items.map((item, index) => (
            <View key={index} style={styles.tableRow}>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.description}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.quantity}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.unitPrice.toFixed(2)}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>
                {(item.quantity * item.unitPrice).toFixed(2)}
              </Text>
            </View>
          ))}
        </View>
        <View style={styles.total}>
          <Text style={styles.totalLabel}>Total: ${totalAmount.toFixed(2)}</Text>
        </View>
      </Page>
    </Document>
  );
};

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 = () => (
  <div className="app-container">
    <PDFDownloadLink
      document={<InvoiceDocument />}
      fileName="invoice.pdf"
      className="download-button"
    >
      {({ loading }) =>
        loading ? 'Loading document...' : 'Download Invoice'
      }
    </PDFDownloadLink>
  </div>
);

export default App;

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

const App = () => (
  <div className="app-container">
    <PDFDownloadLink
      document={<InvoiceDocument />}
      fileName="invoice.pdf"
      className="download-button"
    >
      {({ loading }) =>
        loading ? 'Loading document...' : 'Download Invoice'
      }
    </PDFDownloadLink>
  </div>
);

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. Lorsque vous cliquez sur le bouton Télécharger, le fichier PDF sera téléchargé.

Styliser vos 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 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 pour Node.js est une excellente alternative pour convertir HTML en PDF dans React. Développée par Iron Software, c'est une bibliothèque puissante qui permet aux développeurs de générer et de manipuler des documents PDF directement depuis leurs applications Node.js. L'une de ses fonctionnalités remarquables est sa capacité à gérer l'exécution de JavaScript dans le contenu HTML lors de la génération de PDF, permettant une création de PDF dynamique et interactive.

Avec la prise en charge de différentes plateformes, y compris Windows, MacOS, Linux, Docker, et les plateformes cloud comme Azure et AWS, IronPDF assure 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 construire des interfaces utilisateur, et comme IronPDF est conçu 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 :

Installer IronPDF : Vous pouvez installer IronPDF dans votre projet React à l'aide de npm ou yarn.

npm install @ironsoftware/ironpdf

npm install @ironsoftware/ironpdf

SHELL

Intégrer avec des composants React : Vous pouvez créer des composants React qui utilisent IronPDF pour générer et manipuler des PDFs. Par exemple, vous pouvez avoir un composant qui prend du contenu HTML en entrée et le convertit en PDF en utilisant 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 les fonctionnalités d'IronPDF au sein de vos composants React pour gérer la génération, la manipulation et la sauvegarde de PDF. You can use IronPDF's methods for converting HTML strings, URLs, or images to PDFs.
Rendre les PDFs : Une fois que vous avez généré des PDFs à l'aide d'IronPDF, vous pouvez les rendre dans votre application React en utilisant des composants ou bibliothèques appropriés pour afficher des 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 les capacités de génération de PDF dans leurs applications .NET. IronPDF prend également en charge des fonctionnalités avancées telles que le CSS, le JavaScript, et les polices personnalisées, assurant que vos fichiers PDF générés correspondront au design et aux exigences de votre application.

Conclusion

Dans cet article, nous avons couvert le processus de conversion de HTML en PDF dans React à l'aide de 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, vous permettant de produire des PDF de haute qualité et de répondre aux besoins de divers cas d'utilisation.

IronPDF offre 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 vous engager à acheter. Après la période d'essai, les licences d'achat d'IronPDF commencent à partir de $799, qui inclut un support prioritaire et des mises à jour. Additionally, IronPDF is available for other languages like C# .NET, Java, and Python. Téléchargez la bibliothèque IronPDF en commençant avec IronPDF pour Node.js et essayez-la.

Darrius Serrant

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

Ingénieur logiciel Full Stack (WebOps)

Darrius Serrant est titulaire d'un baccalauréat en informatique de l'université de Miami et travaille comme ingénieur marketing WebOps Full Stack chez Iron Software. Attiré par le codage dès son plus jeune âge, il a vu l'informatique comme à la fois mystérieuse et accessible, en faisant le ...

Articles connexes

Mis à jourjuillet 28, 2025

Éditeur de PDF JavaScript (Tutoriel pour Développeurs)

Dans ce guide approfondi, nous nous embarquerons dans un voyage pour démêler les complexités de la construction d'un éditeur de PDF JavaScript en utilisant les formidables capacités offertes par IronPDF

Mis à jourjuillet 28, 2025

Comment créer un fichier PDF en React

nous explorerons diverses bibliothèques pour générer des PDFs et apprendrons à utiliser la bibliothèque populaire jsPDF pour créer des fichiers PDF directement depuis vos composants React

Mis à jourjuillet 28, 2025

Comment créer des fichiers PDF en JavaScript

IronPDF a été créé pour faciliter aux développeurs la création, la navigation et l'édition de documents PDF. Il fonctionne comme un puissant convertisseur PDF et offre une API de base pour créer, éditer et traiter des fichiers PDF.

Comment imprimer un fichier PDF en JavaScript