Comment créer des documents PDF avec vos composants React à l'aide de React-pdf

React est une bibliothèque JavaScript populaire pour la création d'interfaces utilisateur. Il est possible de créer des fichiers PDF à partir de composants React en utilisant la bibliothèque react-pdf.

Ici, vous apprendrez à créer des documents PDF avec des composants React à l'aide de react-pdf.

Qu'est-ce que React-pdf?

React-pdf est une bibliothèque qui vous permet de créer Documents PDF à partir de composants React. Il fournit un ensemble de composants que vous pouvez utiliser pour créer 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 packages de nœud, exécutez la commande de terminal suivante dans le répertoire de votre projet :

npm install @react-pdf/renderer --save

Pour l'installer avec le gestionnaire de paquets yarn à la place, exécutez cette commande :

fil ajouter @react-pdf/renderer

Création d'un document PDF

Pour créer un document PDF, vous utiliserez les composants Document, Page et Texte de react-pdf. Le Document est responsable de la création d'un nouveau document PDF et du rendu de son contenu. Le Page Le composant crée une nouvelle page dans le document PDF et restitue son contenu. Finalement, le Texte Le composant rend les textes dans le document PDF.

Voici un exemple de la façon dont vous pouvez créer un document PDF en utilisant ces trois composants :

importer Réagir depuis'réagir';
importer { Document, Texte, Page } depuis'@react-pdf/rendu';
constante MonDocument = () => (


Bonjour à vous </Text>
 </Page>
 </Document>
);
exporterdéfaut Mon document;

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 le PDFViewer composant qui génère le document PDF.

Importez le PDFViewer composant et enveloppez votre document dedans :

importer Réagir depuis"réagir"
importer { Lecteur PDF } depuis'@react-pdf/rendu';
importer Mon document depuis"./Mon document";
fonctionApplication() {
retour (


 </PDFViewer>
 )
}
exporterdéfaut Application

Lors du rendu de votre application, cela ressemblera à ceci :

Ajout de styles au document PDF

Pour ajouter des styles à votre document PDF, vous pouvez utiliser les réact-pdf Feuille de style composant. Le Feuille de style vous permet de définir des styles personnalisés pour votre document PDF.

Pour utiliser le Feuille de style composant, importez-le depuis la bibliothèque react-pdf et définissez vos styles pour le document PDF.

Par exemple:

importer Réagir depuis'réagir';
importer { Document, Texte, Page, Feuille de style } depuis'@react-pdf/rendu';
constante styles = StyleSheet.create({
 pages: {
 textAlign: 'centre',
 marginTop: 30,
 taille de police: 30,
 },
 texte: {
 couleur: '#228b22',
 }
});
constante MonDocument = () => (


Bonjour à vous </Text>
 </Page>
 </Document>
);
exporterdéfaut Mon document;

Dans le bloc de code ci-dessus, vous ajoutez des styles à votre composant PDF. Vous définissez les styles à l'aide de la Feuille de style.create fonction. Le Feuille de style.create La fonction crée un objet feuille de style contenant la page et texte modes.

En utilisant le style prop, vous passez le page et texte styles à votre Page et Texte Composants. Cela garantit que vos styles s'appliquent au Page et Texte Composants.

Ajout de mises en page au document PDF

Pour ajouter des mises en page à votre document PDF, vous utilisez le Voir composant. Le Voir component est un composant de conteneur fourni par la bibliothèque react-pdf.

Le Voir le composant agit comme un HTML div—un élément HTML fondamental. Avec lui, vous encapsulez d'autres composants, tels que le Texte composant et définissez vos mises en page en ajoutant des styles au Voir composant.

Ainsi:

importer Réagir depuis'réagir';
importer { Document, Texte, Page, Feuille de style, Affichage } depuis'@react-pdf/rendu';
constante styles = StyleSheet.create({
 pages: {
 marginTop: 30,
 taille de police: 30,
 rembourrage: 20,
 },
 mise en page: {
 marginTop: 30,
 flexDirection: 'ligne',
 JustifierContenu: 'l'espace entre'
 }
});
constante MonDocument = () => (




Bonjour à vous </Text>
 </View>

Bienvenue !!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
exporterdéfaut Mon document;

Dans cet exemple, vous utilisez le Voir composants pour regrouper d'autres composants.

Ajout d'images au document PDF

Vous pouvez également rendre des images dans le document PDF avec le Image composant fourni par la bibliothèque react-pdf. Le Image Le composant vous permet d'afficher des images dans différents formats tels que JPEG, PNG, SVG et bien d'autres.

Le Image le composant prend un src prop qui spécifie l'URL de l'image et un style prop pour ajouter des styles personnalisés à vos images.

Par exemple:

importer Réagir depuis'réagir';
importer { Document, Page, Feuille de style, Vue, Image } depuis'@react-pdf/rendu';
constante styles = StyleSheet.create({
 pages: {
 rembourrage: 20,
 alignItems: 'centre',
 },
 image: {
 largeur: 300,
 hauteur: 200,
 }
});
constante MonDocument = () => (



 source=' https://example.com/image.png'
 style={styles.image} />
 </View>
 </Page>
 </Document>
);
exporterdéfaut Mon document;

Dans cet exemple, vous créez un document PDF avec une seule page contenant une image. Le Image Le composant affiche une image avec un style de largeur de 300 pixels et un style de hauteur de 200 pixels.

Vous souhaiterez 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. Le Lien composant de la bibliothèque react-pdf vous permet de créer des liens dans vos documents PDF.

Le composant Lien prend une src prop pour rediriger les utilisateurs lorsqu'ils cliquent sur le lien. Ils seront redirigés vers l'URL spécifiée dans le composant src prop si vous en définissez un.

Pour utiliser le Lien composant, vous devez d'abord l'importer depuis la bibliothèque react-pdf. Vous pouvez ensuite l'ajouter à votre document PDF comme ceci :

importer Réagir depuis'réagir';
importer { Document, Page, Feuille de style, Affichage, Lien } depuis'@react-pdf/rendu';
constante styles = StyleSheet.create({
 pages: {
 rembourrage: 20,
 alignItems: 'centre',
 },
 lien: {
 couleur: '#333333',
 textDecoration: 'aucun'
 }
});
constante MonDocument = () => (



' https://example.com' style={styles.link}>Cliquez-moi</Link>
 </View>
 </Page>
 </Document>
);
exporterdéfaut Mon document;

L'exemple ci-dessus crée un document PDF avec une page et une vue. Dans la vue, vous affichez un composant Link qui, lorsqu'il est cliqué, redirige l'utilisateur vers l'URL spécifiée, " https://example.com.”

Vous pouvez maintenant créer des documents PDF avec 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 d'aspect professionnel avec un style et une mise en page personnalisés.