import {PdfDocument} from "@ironsoftware/ironpdf";
(async () => {
// Create a PDF from an HTML string
const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");
// Export the PDF to a file
await pdf.saveAs("output.pdf");
// Advanced Example with HTML Assets
// Load external HTML assets: Images, CSS, and JavaScript.
const htmlContentWithAssets = "<img src='icons/iron.png'>";
const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets);
// Save the PDF with loaded assets
await advancedPdf.saveAs("html-with-assets.pdf");
})();
Bienvenue dans le didacticiel sur la création de documents PDF à partir d'une application React ! Dans ce tutoriel, nous allons explorer différentes bibliothèques pour générer des PDF et apprendre à utiliser la populaire bibliothèque jsPDF pour créer des fichiers PDF directement à partir de vos composants React. Alors, plongeons et commençons !
Le PDF (Portable Document Format) est un format de fichier largement utilisé pour partager et imprimer des documents tout en préservant leur mise en page et leur formatage. En tant que développeur web React, vous pouvez rencontrer des scénarios dans lesquels vous avez besoin de générer des documents PDF, tels que des factures, des rapports ou des contrats de vente, directement à partir de votre application React.
Choisir une bibliothèque React PDF
Créer des documents PDF dans une application React peut être une tâche décourageante, surtout si vous êtes nouveau dans le paysage. Heureusement, nous disposons de plusieurs bibliothèques tierces qui simplifient considérablement ce processus. Chaque bibliothèque possède ses propres caractéristiques et utilités, répondant à des cas d'utilisation différents. Examinons ces bibliothèques un peu plus en détail.
jsPDF
jsPDF est une bibliothèque très populaire parmi les développeurs pour générer des fichiers PDF à partir de JavaScript. L'un de ses principaux arguments de vente est sa simplicité. Sa syntaxe et son utilisation sont assez simples, ce qui vous permet de transformer votre contenu HTML en fichier PDF en un rien de temps.
Il vous permet de contrôler le formatage et la mise en page de vos PDF, qu'il s'agisse de modifier la taille et la couleur des polices ou d'ajuster l'orientation et la taille des pages. jsPDF est une solution robuste qui fonctionne à la fois dans les environnements de navigateur et de serveur, ce qui en fait un excellent choix pour un large éventail d'applications JavaScript.
pdfmake
pdfmake se distingue comme une solution d'impression PDF client/serveur en JavaScript pur. Cette bibliothèque est un excellent choix pour créer des PDF plus complexes, grâce à son API complète et à ses options de mise en page flexibles. Avec pdfmake, vous pouvez définir le contenu et la structure de votre document à l'aide d'un simple objet JavaScript, puis le transformer en un document PDF valide.
React-PDF
React-PDF est une bibliothèque unique qui fournit des fonctionnalités puissantes pour créer des fichiers PDF à l'aide de composants React. Au lieu d'écrire manuellement la structure de votre document dans un objet JavaScript, vous pouvez créer votre PDF comme vous le feriez pour une application React classique - à l'aide de composants et d'accessoires réutilisables. Le site web IronPDF propose un tutoriel sur la création de fichiers PDF en utilisant la bibliothèque React-PDF.
Pourquoi choisir jsPDF ?
Bien que ces trois bibliothèques fournissent des outils puissants pour générer des documents PDF dans React, nous utiliserons jsPDF dans ce tutoriel en raison de sa simplicité, de sa flexibilité et de sa large adoption par la communauté. Il constitue une barrière d'entrée moins élevée pour les débutants, et son ensemble de fonctionnalités robustes en fait un choix approprié pour de nombreux cas d'utilisation. Les principes que nous allons explorer avec jsPDF vous donneront une base solide pour générer des PDF, et vous serez en mesure d'utiliser d'autres bibliothèques plus facilement si votre projet l'exige.
Conditions préalables
Avant de plonger dans ce tutoriel, il est essentiel de s'assurer que vous disposez des outils et des connaissances nécessaires pour le suivre sans problème. Les conditions préalables à ce tutoriel sont les suivantes :
Compréhension de base de React
Avant tout, vous devez avoir une compréhension de base de React, une bibliothèque JavaScript populaire pour la construction d'interfaces utilisateur, en particulier les applications à page unique. Vous devriez être familiarisé avec des concepts tels que JSX (JavaScript XML), les composants, l'état et les props dans React.
Environnement de développement
Vous devez également disposer d'un environnement de développement sur votre ordinateur pour créer des applications React. Cela inclut un éditeur de texte ou un environnement de développement intégré (IDE). Les éditeurs de texte tels que Visual Studio Code, Atom ou Sublime Text sont de bonnes options.
Node.js et npm
Pour gérer notre projet et ses dépendances, nous utiliserons Node.js et npm (Node Package Manager). Assurez-vous que Node.js est installé sur votre ordinateur. Node.js est un moteur d'exécution JavaScript qui permet d'exécuter du JavaScript sur nos serveurs. Il est livré avec npm installé, ce qui vous permet de gérer les bibliothèques nécessaires à votre projet.
Vous pouvez vérifier si Node.js et npm sont installés en exécutant les commandes suivantes dans le terminal :
node -v
npm -v
node -v
npm -v
SHELL
Ces commandes affichent respectivement la version de Node.js et de npm installée sur votre système. Si vous ne les avez pas installés ou si vos versions sont obsolètes, vous devriez télécharger et installer la dernière version à Long Terme (LTS) de Node.js depuis leur page de téléchargement officielle.
Étape 1 : Mise en place du projet
Commençons par mettre en place notre projet React. Ouvrez votre terminal et naviguez jusqu'au répertoire où vous souhaitez créer votre projet. Exécutez la commande suivante pour créer une nouvelle application React :
npx create-react-app pdf-from-react
npx create-react-app pdf-from-react
SHELL
Cette commande créera un nouveau répertoire appelé pdf-from-react avec une structure de projet React basique.
Ensuite, naviguez dans le répertoire du projet :
cd pdf-from-react
cd pdf-from-react
SHELL
Nous pouvons maintenant ouvrir le projet dans notre éditeur de code et procéder à la mise en œuvre.
Étape 2 : Ajout des dépendances requises
Tout d'abord, nous devons installer les paquets nécessaires. Installez react, react-dom, @mui/material, et jspdf en utilisant la commande de terminal suivante.
Étape 3 : Création de la fonctionnalité de génération de PDF
Importation de bibliothèques
Nous commençons par importer les dépendances nécessaires à notre application. Ceux-ci incluent divers composants de la bibliothèque Material-UI, la bibliothèque jsPDF pour générer des PDF, et des utilitaires de style.
import React, { useState } from "react";
import "./App.css";
import {
Button,
TextField,
Box,
Container,
Typography,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
IconButton,
Snackbar,
Alert,
} from "@mui/material";
import Grid from "@mui/material/Grid";
import DeleteIcon from "@mui/icons-material/Delete";
import jsPDF from "jspdf";
import { styled } from "@mui/material/styles";
import { tableCellClasses } from "@mui/material/TableCell";
jsx
JAVASCRIPT
Création de composants stylisés
Pour ajouter un comportement cohérent entre navigateurs à notre application, nous avons utilisé l'utilitaire styled de la bibliothèque MUI pour créer StyledTableCell et StyledTableRow.
Le composant principal de notre application est le composant App. Nous avons quatre variables d'état : customerName et customerAddress pour suivre les données du client, items pour suivre la liste des articles dans la facture, et error pour afficher un message d'erreur si nécessaire.
Dans ce bloc de code, nous avons défini des fonctions pour gérer les interactions avec l'utilisateur : modification des détails d'un élément, ajout d'un nouvel élément et suppression d'un élément. La fonction handleItemChange met à jour les propriétés d'un élément lorsqu'un utilisateur les modifie. La fonction addItem ajoute un nouvel élément à la liste. La fonction deleteItem supprime un élément de la liste.
Ce qui suit est le code de la fonction generateInvoice :
// Generate invoice
const generateInvoice = () => {
// Validate the input fields
if (
!customerName
!customerAddress
items.some((item) => !item.name
!item.quantity
!item.price)
) {
setError(true);
return;
}
// Create a new jsPDF instance
let doc = new jsPDF("p", "pt");
// Add invoice header
doc.setFontSize(24);
doc.text("Invoice", 40, 60);
doc.setFontSize(10);
doc.text("Invoice Number: 123456", 40, 90);
doc.text("Date: " + new Date().toDateString(), 40, 110);
doc.text(`Customer Name: ${customerName}`, 40, 130);
doc.text(`Customer Address: ${customerAddress}`, 40, 150);
// Add items section
doc.setFontSize(14);
doc.text("Items:", 40, 200);
doc.line(40, 210, 550, 210);
// Add item details
doc.setFontSize(12);
let yOffset = 240;
let total = 0;
items.forEach((item) => {
let itemTotal = item.quantity * item.price;
total += itemTotal;
doc.text(`Item: ${item.name}`, 40, yOffset);
doc.text(`Quantity: ${item.quantity}`, 200, yOffset);
doc.text(`Price: $${item.price}`, 300, yOffset);
doc.text(`Total: $${itemTotal}`, 400, yOffset);
yOffset += 20;
});
// Add total
doc.line(40, yOffset, 550, yOffset);
doc.setFontSize(14);
doc.text(`Total: $${total}`, 400, yOffset + 30);
// Save the generated PDF as "invoice.pdf"
doc.save("invoice.pdf");
// Reset error state
setError(false);
};
jsx
JAVASCRIPT
Dans la fonction generateInvoice, nous effectuons d'abord une validation des champs de saisie pour nous assurer que le nom du client, l'adresse du client et les détails de l'article sont remplis. Si l'un de ces champs est vide, nous définissons l'état error à true et retournons immédiatement.
Ensuite, nous créons une nouvelle instance de jsPDF en appelant new jsPDF("p", "pt"). Le premier argument "p" spécifie l'orientation de la page en portrait, et le second argument "pt" spécifie l'unité de mesure en points.
Nous commençons ensuite à ajouter le contenu à notre document PDF. Nous définissons la taille de la police en utilisant doc.setFontSize et utilisons la méthode doc.text pour ajouter du texte à des coordonnées spécifiques sur la page. Nous ajoutons l'en-tête de la facture, y compris le titre, le numéro de la facture, la date, le nom et l'adresse du client.
Après l'en-tête, nous ajoutons la section "Items" en définissant la taille de la police et en ajoutant une ligne à l'aide de doc.line pour séparer les éléments de l'en-tête. Ensuite, nous parcourons chaque élément du tableau items et calculons le prix total pour chaque élément en multipliant la quantité par le prix. Nous mettons à jour la variable total avec la somme de tous les totaux des éléments.
Pour chaque article, nous utilisons doc.text pour ajouter le nom de l'article, la quantité, le prix et le total de l'article au document PDF. Nous incrémentons la variable yOffset pour passer à la ligne suivante pour chaque élément. Enfin, nous ajoutons une ligne pour séparer les articles du total et utilisons doc.text pour ajouter le montant total en bas à droite du document.
Une fois le contenu ajouté, nous utilisons doc.save("invoice.pdf") pour enregistrer le PDF généré sous le nom "invoice.pdf" sur l'ordinateur de l'utilisateur. Enfin, nous réinitialisons l'état error à false pour effacer toutes les erreurs de validation précédentes.
Étape 4 : Rendu de l'interface utilisateur
L'instruction return contient le code JSX qui gère le processus de rendu. Il comprend des champs de saisie pour le nom et l'adresse du client, un tableau pour saisir les détails des articles, des boutons pour ajouter des articles et générer la facture, ainsi qu'une barre d'erreur pour afficher les erreurs de validation.
Il utilise des composants de la bibliothèque Material-UI, tels que Button, TextField, Box, Container, Typography, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, IconButton, Snackbar, et Alert, pour créer des composants de base. Ces composants sont utilisés pour créer les champs du formulaire, les tableaux, les boutons et les notifications d'erreur.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
/* This is the weight for bold in Poppins */
color: #FF6347;
/* This is the color Tomato. Replace with your preferred color */
}
body {
font-family: 'Poppins', sans-serif;
background-color: #E9F8F4;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Étape 5 : Test de l'application
Pour tester la fonction de génération de PDF, exécutez la commande suivante dans le terminal :
npm start
npm start
SHELL
Cela démarrera le serveur de développement, et vous pourrez voir l'application dans votre navigateur à l'adresse http://localhost:3000.
Remplissez le nom du client, l'adresse et les détails de l'article dans les champs de saisie et cliquez sur le bouton "Générer la facture". Le fichier PDF sera téléchargé sur votre ordinateur et vous pourrez l'ouvrir pour voir la facture générée en pleine page.
Lorsque vous cliquez sur le bouton "Générer la facture", le fichier PDF est généré.
Si vous essayez de générer un PDF avec un champ vide, un message d'erreur s'affichera dans le coin supérieur droit.
IronPDF - La bibliothèque PDF de Node.js
IronPDF for Node.js est une bibliothèque PDF pour Node.js complète qui excelle en précision, facilité d'utilisation et rapidité. Il offre un large éventail de fonctionnalités pour générer, éditer et formater des PDF directement à partir de HTML, d'URL et d'images dans React. 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.
Les caractéristiques notables d'IronPDF Node.js comprennent : un rendu parfait au pixel près, des options de formatage étendues et des capacités d'édition avancées telles que la fusion et la division de PDF, l'ajout d'annotations et la création de formulaires PDF.
Voici un exemple de génération d'un document PDF à partir d'un fichier HTML, d'une chaîne HTML et d'une URL :
En conclusion, la création de PDF dans une application React ne doit pas être intimidante. Avec les bons outils et une bonne compréhension, vous pouvez générer sans effort de beaux documents PDF bien structurés. Nous avons exploré diverses bibliothèques telles que jsPDF, pdfmake, et React-PDF, chacune ayant ses propres forces et caractéristiques uniques.
Grâce au processus d'intégration simple d'IronPDF pour les frameworks et bibliothèques en JavaScript, à son excellente documentation et à son support technique réactif, les développeurs peuvent se lancer rapidement, ce qui en fait un choix de premier ordre pour générer des PDF de qualité professionnelle dans les applications Node.js.
Darrius Serrant est titulaire d'une licence en informatique de l'Université de Miami et travaille en tant qu'ingénieur marketing Full Stack WebOps chez Iron Software. Attiré par le code depuis son plus jeune âge, il a vu l'informatique comme à la fois mystérieuse et accessible, en faisant le support parfait pour la créativité et la résolution de problèmes.
Chez Iron Software, Darrius apprécie de créer de nouvelles choses et de simplifier des concepts complexes pour les rendre plus compréhensibles. En tant que l'un de nos développeurs résidents, il a également fait du bénévolat pour enseigner aux étudiants, partageant son expertise avec la prochaine génération.
Pour Darrius, son travail est épanouissant car il est apprécié et a un réel impact.
< PRÉCÉDENT Editeur PDF JavaScript (Tutoriel du développeur)
SUIVANT > Comment créer des fichiers PDF en JavaScript
Vous avez une question ? Prendre contact avec notre équipe de développement.
Vous avez une question ? Contactez notre équipe de développement.
Commencez GRATUITEMENT
Aucune carte de crédit n'est requise
Test dans un environnement réel
Testez en production sans filigranes. Fonctionne là où vous en avez besoin.
Produit entièrement fonctionnel
Obtenez 30 jours de produit entièrement fonctionnel. Faites-le fonctionner en quelques minutes.
assistance technique 24/5
Accès complet à notre équipe d'ingénieurs pendant la période d'essai du produit
Obtenez votre clé d'essai de 30 jours gratuite instantanément.
Aucune carte de crédit ou création de compte n'est nécessaire
Le formulaire d'essai a été soumis avec succès.
Votre clé d'essai devrait être dans l'e-mail. Si ce n'est pas le cas, veuillez contacter support@ironsoftware.com
Des millions d'ingénieurs dans le monde entier lui font confiance
Réservez une démo en direct gratuite
Réservez une démonstration personnelle de 30 minutes.
Pas de contrat, pas de détails de carte, pas d'engagements.
Voici ce à quoi vous pouvez vous attendre :
Une démonstration en direct de notre produit et de ses principales fonctionnalités
Obtenez des recommandations de fonctionnalités spécifiques au projet
Toutes vos questions trouvent réponse pour vous assurer de disposer de toutes les informations dont vous avez besoin. (Aucun engagement de votre part.)
CHOISIR L'HEURE
VOS INFORMATIONS
Réservez votre démo en direct gratuite
Fiable par plus de 2 millions d'ingénieurs dans le monde entier