Comment générer un PDF à partir de code HTML dans une application React ou Node.js

Générer un PDF depuis une page web peut sembler une action simple qui demande peu de temps et d’efforts. La réalité est toutefois un peu différente, et trouver la meilleure solution peut souvent s’avérer complexe.

Considérons ce scénario hypothétique :

Nous avons une application React via laquelle nous souhaitons créer un PDF à partir de toute la page ou seulement d’une partie. Notre document PDF peut contenir des graphiques, des tableaux, des images et/ou du texte simple, et il doit être structuré sans coupures ni chevauchements. Nous voulons aussi un bouton sur la page pour enregistrer le document.

Dans cet article, je vous présente plusieurs solutions en soulignant les avantages et les inconvénients de chacune. Nous commencerons par la méthode la plus simple pour aller vers la plus avancée.

Utiliser l’impression native du navigateur avec les règles d’impression CSS

De manière générale, un navigateur sait déjà enregistrer et imprimer des PDF depuis nos pages : il suffit d’appuyer sur Ctrl/Cmd + P pour ouvrir la fenêtre de configuration du document et personnaliser son apparence. 

Créer un bouton qui effectue la même action se fait ainsi :

const SavePdfButton=()=>{
	return (
		<button onClick={window.print()}>Download PDF</button>
	)
}

Si nous souhaitons modifier l’apparence, masquer certains éléments ou changer la taille des éléments dans le PDF, nous pouvons écrire des règles d’impression CSS :

@media print {
	.save-button {
		display: none;
	}
	.content {
		width: 100%;
	}
}

On peut aussi vouloir gérer les sauts de page et/ou éviter les chevauchements. Cela se fait avec des propriétés de style spécifiques, comme dans cet exemple :

@media print {
	h1 {
		break-before: always;
	}
	table, img, svg {
		break-inside: avoid;
	}
}

Voici un excellent article gratuit qui décrit tout ce que l’on peut faire avec ces règles d’impression en CSS.

Pour quelque chose de petit et simple, c’est une solution idéale et l’usage de bibliothèques serait une sur‑ingénierie.  Mais ce n’est pas l’idéal lorsqu’on a besoin d’accéder à des documents générés par le code. 

Avantages : 

Pas de bibliothèques externes

Implémentation simple, y compris l’orientation de la page

N’alourdit pas la machine de l’utilisateur

Permet à l’utilisateur de sélectionner et rechercher du texte

Inconvénients :

Difficile d’obtenir un rendu strictement identique selon les navigateurs

Les boutons d’enregistrement peuvent être difficiles à trouver à cause des différences de rendu des navigateurs

Pas d’accès aux PDFs générés par le code

Le contenu du PDF dépend de la taille de la fenêtre du navigateur

Faire une capture du DOM (HTML => Canvas => Image => PDF)

Voici une autre solution simple : prendre une capture de la page ou d’un élément, puis la convertir en PDF via Canvas et transformation en image :

html2canvas pour créer une capture à partir du HTML et générer un Canvas

jsPDF pour transformer une image en PDF

On peut faire la partie Canvas => Image en JavaScript pur.  La fonction ressemblera donc à ceci :

import html2canvas from 'html2canvas'
import jsPdf from 'jspdf';

function savePdf(){
	const domElement=document.querySelector('#container')
	html2canvas(domElement, { onclose: (document)=>{
	document.querySelector('#save-button').style.visibility='hidden'
	}})
.then((canvas)=>{
	const img=canvas.toDataURL('image/jpeg')
	const pdf=new jsPdf()
	pdf.addImage(imgData, 'JPEG',0,0,width,height)
	pdf.save('filename.pdf')
})
}

Comme vous le voyez, il est possible d’ajouter des styles avant la transformation HTML => Canvas.

Cependant, si le HTML est long, vous voudrez peut‑être répartir différents éléments sur plusieurs pages. Pour cela, créez une capture de plusieurs éléments et combinez‑les en un seul document PDF :

import html2canvas from 'html2canvas'
import jsPdf from 'jspdf'

function savePdf(){
	const domElements=document.querySelectorAll('.container')
	const pdf=new jsPdf()
	
	domElements.forEach((element,i)=>{
	const img=canvas.toDataURL('image/jpeg')
	pdf.addImage(imgData,'JPEG',0,0,width,height)
	const isSectionLast=domElements.length===i+1;
	
	if(isSectionLast){
		pdf.save('filename.pdf')
	}else{
		doc.addPage()
	}
	}
}

De cette façon, vous pouvez créer des PDFs corrects, très proches de l’HTML d’origine, avec le contrôle sur l’apparence du document et les éléments inclus.  L’inconvénient, toutefois, est qu’il n’est toujours pas possible de sélectionner et rechercher le texte.  

Avantages :

Très proche de l’HTML

Implémentation simple

Accès au PDF généré par le code

Inconvénients :

L’utilisateur ne peut pas sélectionner ni rechercher du texte, notamment avec un bandeau cookies présent.

Le contenu du PDF dépend de la taille de la fenêtre du navigateur

Nécessite des packages externes

Utiliser des bibliothèques PDF / JavaScript

jsPDF (déjà cité), PDFKit, React-pdf sont des bibliothèques que vous pouvez utiliser pour créer un PDF dans React. Cependant, un problème demeure : il faut recréer l’HTML et le CSS spécifiquement pour le document PDF.

Dans notre scénario, cette solution est donc insuffisante, car nous préférons simplement réutiliser notre HTML avec de légères modifications, et non le réécrire avec des variantes du même design. Cela reste toutefois utile si vous souhaitez créer un PDF from scratch en partant d’une autre source d’information.

Voici à quoi cela ressemble avec React-pdf :

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

const styles=StyleSheet.create({
	page:{
		backgroundColor: "#E4E4E4"
	},
	section:{
		margin: 10,
	}
})

const MyDocument=()=>{
	<Document>
		<Page size="A4" style={styles.page}>
			<View style={styles.section}>
				<Text>Section</Text>
			</View>
		</Page>
	</Document>
}

Avantages :

Permet de générer le PDF depuis le code

Le contenu du PDF n’est pas dépendant de la taille de la fenêtre du navigateur ni de la date de création.

Le résultat est identique selon les navigateurs

 Permet de sélectionner et rechercher du texte

Inconvénients :

Impossible de copier l’HTML existant tel quel

Peut être assez chronophage.

Le code risque de contenir deux variantes d’un même design

Utiliser Puppeteer, Headless Chrome avec Node.js

Comme le code s’exécute côté back‑end, c’est la solution la plus complexe et différente des solutions entièrement côté client évoquées plus haut. 

En d’autres termes, Puppeteer est un navigateur que vous pouvez piloter depuis Node.js.  Et la documentation montre qu’il peut servir à générer des captures d’écran et des PDFs de pages. 

Voici un exemple qui navigue directement vers une URL, applique quelques styles et génère un fichier PDF :

const puppeter=require('puppeteer')

async function savePdf(){
	const browser=await puppeteer.launch({headless: true})
	const page=await browser.newPage();
	await page.goto('https://start-up.house',{waitUntil:'networkidle0'});
	await page.addStyleTag({content: '#save-button {display: none}'})
	const pdf=await page.pdf({format: 'A4'});
	await browser.close();
	return pdf;
}

Une fois créé, le document est renvoyé au front‑end.  Côté client, il est récupéré, transformé en Blob puis enregistré. 

Par exemple :

function savePdf(){
	return fetchPdfData().then((pdfData)=>{
		const blob=new Blob([pdfData],{type: 'application/pdf'})
		const link=document.createElement('a')
		link.href=window.URL.createObjectURL(blob)
		link.download='file-name.pdf'
		link.click()
	}
}

C’est sans doute la solution la plus complète, car elle apporte le plus d’avantages et couvre même les cas difficiles.  De plus, le document généré permet la sélection et la recherche de texte et peut aussi être enregistré sur le serveur sans appels d’API supplémentaires.  

Avantages :

Accès au PDF généré par le code

Le contenu du PDF ne dépend pas de la taille de la fenêtre du navigateur

Permet de sélectionner et rechercher le texte

Très proche de l’HTML

N’alourdit pas la machine de l’utilisateur

Inconvénients : 

Nécessite du code côté client et côté serveur

L’implémentation peut être compliquée dans certains cas

Conclusion

Comme nous l’avons vu, générer des PDFs à partir de HTML peut poser problème.  Mais ce n’est pas une fatalité, et les exemples ci‑dessus ne sont que quelques options pour vous aider à aborder le sujet.  Avec un peu d’essais et d’erreurs, vous finirez par débloquer la situation : n’hésitez pas à tester différentes approches pour déterminer celle qui fonctionne le mieux pour vous. 

Et… bonne chance !

Si vous souhaitez en savoir plus, contactez‑nous : hello@start-up.house

FAQs

Comment enregistrer toute ma page HTML en document PDF avec React ?

• En utilisant les différentes méthodes abordées dans l’article, vous pouvez convertir votre page HTML en document PDF. La manière la plus directe consiste à utiliser l’impression native du navigateur avec des règles d’impression CSS.

Quelles bibliothèques peuvent aider à convertir du HTML en PDF dans une app React ?

• React PDF, PDFKit et jsPDF sont des bibliothèques populaires à cet effet. Cependant, si vous utilisez spécifiquement la bibliothèque React PDF, il est essentiel d’employer les composants React PDF appropriés pour obtenir le résultat souhaité.

L’export d’une page HTML en PDF conserve‑t‑il la couleur de fond et les polices personnalisées ?

• Cela dépend en grande partie de la méthode utilisée. Certaines méthodes ne conservent pas la couleur de fond et les polices personnalisées, tandis que d’autres, notamment avec Puppeteer ou des bibliothèques dédiées, les préservent souvent.

Quand j’essaie de créer un document PDF depuis mon app React, la couleur de fond diffère de celle de ma page HTML. Pourquoi ?

• La fidélité de la couleur de fond lors de la conversion HTML => PDF dépend de la méthode ou de la bibliothèque employée. Assurez‑vous que la solution choisie prend bien en charge la conservation de l’arrière‑plan.

Est‑il possible d’exporter le contenu par défaut de mon app React vers un fichier PDF ?

• Oui, selon le contenu et la structure de votre app React, vous pouvez utiliser des outils et bibliothèques pour exporter le contenu par défaut vers un fichier PDF en toute simplicité.

Puis‑je convertir une chaîne HTML en document PDF avec jsPDF dans une app React ?

• Oui, avec jsPDF, vous pouvez convertir du HTML, y compris des chaînes HTML, en documents PDF. L’associer à d’autres outils ou bibliothèques peut encore simplifier le processus de conversion dans une app React.

Quelles sont les principales différences entre convertir du HTML en PDF et faire une capture via le DOM dans une app React ?

• Lors d’une conversion directe HTML => PDF, le PDF résultant permet souvent la sélection et la recherche de texte. Avec la méthode capture (HTML => Canvas => Image => PDF), le PDF est essentiellement une image, et la sélection de texte peut ne pas être possible.

Comment garantir une couleur de fond cohérente lors de la conversion de ma page HTML en document PDF ?

• L’utilisation d’outils ou bibliothèques dédiés qui préservent les styles, comme Puppeteer ou React PDF, aide à maintenir la cohérence de la couleur de fond pendant la conversion.

Entre créer un fichier PDF from scratch avec React PDF et convertir du HTML en PDF, quelle méthode est la plus rapide ?

• Convertir un HTML existant est généralement plus rapide, car vous réutilisez du contenu. Créer un PDF from scratch avec React PDF peut être plus long, surtout si le design est complexe.

Comment gérer les fichiers PDF volumineux lors de la conversion d’une page HTML longue avec React ?

• Si vous avez une page HTML longue, il est conseillé de diviser le contenu en sections ou en pages pour améliorer la lisibilité. Des bibliothèques comme Puppeteer offrent des fonctionnalités pour gérer et paginer efficacement les contenus étendus.

Qu’est‑ce que le processus « html to pdf react » en développement web ? 

• Le processus « html to pdf react » désigne la conversion d’un contenu HTML au sein d’une application React en document PDF. Cela se fait généralement via des bibliothèques qui capturent la structure et le style HTML pour produire un PDF pouvant être enregistré, imprimé ou partagé.

Quelles bibliothèques sont couramment utilisées pour les conversions « html to pdf react » ? 

• Les bibliothèques populaires pour « html to pdf react » incluent jsPDF et html2canvas. Elles fonctionnent ensemble pour capturer l’HTML rendu par les composants React et le convertir en PDF, en conservant au mieux la mise en page et les styles.

Y a‑t‑il des défis dans le processus « html to pdf react » ? 

• L’un des principaux défis du « html to pdf react » consiste à garantir que le PDF reflète fidèlement le contenu HTML d’origine en termes de mise en page, de styles et d’éventuelle interactivité. La gestion efficace des données dynamiques et des documents volumineux est également un défi fréquent.

Comment garantir une sortie de haute qualité dans le processus « html to pdf react » ? 

• Pour une sortie de haute qualité avec « html to pdf react », choisissez des bibliothèques fiables, testez la conversion avec différents types de contenu et envisagez des solutions sur mesure pour les mises en page complexes ou les données dynamiques. Des mises à jour régulières et l’optimisation du code contribuent aussi à de meilleurs PDF.

Peut‑on gérer du contenu interactif lors de conversions « html to pdf react » ? 

• Si une interactivité basique peut parfois être conservée, les éléments interactifs complexes comme les effets hover ou certains liens cliquables ne seront pas toujours pleinement reproduits dans le PDF. L’objectif est surtout de capturer fidèlement la présentation visuelle plutôt que l’interactivité.