React est une bibliothèque JavaScript populaire pour la construction d’interfaces utilisateur. Il est possible de créer des fichiers PDF à partir de composants React en utilisant la bibliothèque react-pdf.
Vous apprendrez ici à créer des documents PDF avec des composants React en utilisant react-pdf.
Qu’est-ce que React-pdf ?
React-pdf est une bibliothèque qui vous permet de créer des documents PDF à partir de composants React. Elle fournit un ensemble de composants que vous pouvez utiliser pour construire votre document PDF et utilise un DOM virtuel pour rendre les composants au format PDF.
Installation de React-pdf
Pour installer react-pdf à l’aide du gestionnaire de paquets node, exécutez la commande suivante dans le répertoire de votre projet :
npm install @react-pdf/renderer --save Pour l’installer avec le gestionnaire de paquets yarn, exécutez la commande suivante :
yarn add @react-pdf/renderer
Création d’un document PDF
Pour créer un document PDF, vous utiliserez les composants Document, Page et Text de react-pdf. Les composants Document Le composant Document est responsable de la création d’un nouveau document PDF et du rendu de son contenu. Le composant Page crée une nouvelle page dans le document PDF et rend son contenu. Enfin, le composant Texte rend les textes à l’intérieur du document PDF.
Voici un exemple de création d’un document PDF à l’aide de ces trois composants :
import React from 'react';
import { Document, Text, Page } from '@react-pdf/renderer';const MyDocument = () => (
<Document>
<Page>
<Text>Hello There</Text>
</Page>
</Document>
);
export default MyDocument;
Dans cet exemple, vous créez un document PDF avec une seule page contenant une seule ligne de texte, « Hello There ». Après avoir créé un document PDF, vous devez le rendre dans votre application React.
Pour rendre le document PDF dans votre application, utilisez la méthode PDFViewer qui génère le document PDF.
Importer le PDFViewer et d’y intégrer votre document :
import React from "react"
import { PDFViewer } from '@react-pdf/renderer';
import MyDocument from "./MyDocument";function App() {
return (
<PDFViewer>
<MyDocument />
</PDFViewer>
)
}
export default App
Lors du rendu de votre application, celle-ci ressemblera à quelque chose comme ceci :
Ajout de styles au document PDF
Pour ajouter des styles à votre document PDF, vous pouvez utiliser la fonction react-pdf Feuille de style composant. Le composant Feuille de style vous permet de définir des styles personnalisés pour votre document PDF.
Pour utiliser le composant Feuille de style l’importer de la bibliothèque react-pdf et définir vos styles pour le document PDF.
Par exemple :
import React from 'react';
import { Document, Text, Page, Stylesheet } from '@react-pdf/renderer';const styles = StyleSheet.create({
page:...
