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: {
textAlign: 'center',
marginTop: 30,
fontSize: 30,
},
text: {
color: '#228b22',
}
});
const MyDocument = () => (
<Document>
<Page style={styles.page}>
<Text style={styles.text}>Hello There</Text>
</Page>
</Document>
);
export default MyDocument;
Dans le bloc de code ci-dessus, vous ajoutez des styles à votre composant PDF. Vous définissez les styles à l’aide de l’élément Stylesheet.create fonction. La fonction Stylesheet.create crée un objet feuille de style contenant le fichier page et texte styles.
Utilisation de l’outil style vous passez l’élément page et texte styles à votre Page et Texte composants. Cela garantit que vos styles s’appliquent aux composants Page et Texte composants.
Ajout de mises en page au document PDF
Pour ajouter des mises en page à votre document PDF, vous utilisez la fonction Voir composante. Les Voir component est un composant conteneur fourni par la bibliothèque react-pdf.
Le composant Voir Le composant se comporte comme un HTML div-un élément HTML fondamental. Il permet d’envelopper d’autres composants, tels que la balise Texte et définissez vos mises en page en ajoutant des styles au composant Voir composant.
Comme ça :
import React from 'react';
import { Document, Text, Page, StyleSheet, View } from '@react-pdf/renderer';
const styles = StyleSheet.create({
page: {
marginTop: 30,
fontSize: 30,
padding: 20,
},
layout: {
marginTop: 30,
flexDirection: 'row',
justifyContent: 'space-between'
}
});
const MyDocument = () => (
<Document>
<Page style={styles.page}>
<View style={styles.layout}>
<View>
<Text>Hello There</Text>
</View>
<View>
<Text>Welcome!!!</Text>
</View>
</View>
</Page>
</Document>
);
export default MyDocument;
Dans cet exemple, vous utilisez l’option Voir Les composants du système d’information sur la santé permettent de regrouper d’autres composants.
Ajout d’images au document PDF
Vous pouvez également rendre des images dans le document PDF à l’aide de la fonction Image composant fourni par la bibliothèque react-pdf. Le composant Image vous permet d’afficher des images dans différents formats tels que JPEG, PNG, SVG, et bien d’autres encore.
Le Image Le composant prend une src qui spécifie l’URL de l’image et une balise style pour ajouter des styles personnalisés à vos images.
Par exemple :
import React from 'react';
import { Document, Page, StyleSheet, View, Image } from '@react-pdf/renderer';
const styles = StyleSheet.create({
page: {
padding: 20,
alignItems: 'center',
},
image: {
width: 300,
height: 200,
}
});
const MyDocument = () => (
<Document>
<Page style={styles.page}>
<View>
<Image
src='https://example.com/image.png'
style={styles.image} />
</View>
</Page>
</Document>
);
export default MyDocument;
Dans cet exemple, vous créez un document PDF d’une seule page contenant une image. La page Image affiche une image avec une largeur de 300 pixels et une hauteur de 200 pixels.
Ajout de liens au document PDF
Vous voudrez probablement inclure des liens dans votre document PDF. Les liens dirigent l’utilisateur vers une URL désignée, qui peut offrir des informations supplémentaires non disponibles dans le document PDF. Les Lien de la bibliothèque react-pdf vous permet de créer des liens dans vos documents PDF.
Le composant Link prend un objet src pour rediriger les utilisateurs lorsqu’ils cliquent sur le lien. Ils seront redirigés vers l’URL spécifiée dans la propriété src prop si vous en définissez un.
Pour utiliser l’option Lien Si vous avez besoin de ce composant, vous devez d’abord l’importer à partir de la bibliothèque react-pdf. Vous pouvez ensuite l’ajouter à votre document PDF comme suit :
import React from 'react';
import { Document, Page, StyleSheet, View, Link } from '@react-pdf/renderer';
const styles = StyleSheet.create({
page: {
padding: 20,
alignItems: 'center',
},
link: {
color: '#333333',
textDecoration: 'none'
}
});
const MyDocument = () => (
<Document>
<Page style={styles.page}>
<View>
<Link src='https://example.com' style={styles.link}>Click Me</Link>
</View>
</Page>
</Document>
);
export default MyDocument;
L’exemple ci-dessus crée un document PDF avec une page et une vue. Dans la vue, vous affichez un composant Lien qui, lorsqu’il est cliqué, redirige l’utilisateur vers l’URL spécifiée, « https://example.com ».
Vous pouvez désormais créer des documents PDF à l’aide de React
React-pdf est une bibliothèque puissante qui vous permet de générer des documents PDF à partir de vos composants React. Vous pouvez créer des fichiers PDF à l’aide de react-pdf, puis y ajouter du texte, des images et des liens.
En utilisant cette bibliothèque, vous pouvez facilement générer des fichiers PDF de qualité professionnelle avec un style et une mise en page personnalisés.
