Comment créer des PDF dans React à partir de données JSON avec jsPDF

Cet article montrera comment créer un PDF dans JS/React à partir de données JSON.

En tant que développeurs, nous devons intégrer la génération de PDF au sein de l'application. Ainsi, dans cet article, nous discuterons de la création de PDF à l'aide de jspdf.

Alors, commençons.

Nous utiliserons un environnement React spécifiquement pour cet article. Je suppose que vous connaissez JavaScript/React et que vous avez déjà configuré l'environnement React

Avant de plonger dans le vif du sujet, nous avons besoin de quelques exemples de données pour générer le PDF. Nous allons créer une méthode pour générer ces données.

const generateUsers = (count) => {
    const users = [];

    for (let i = 1; i <= count; i++) {
      const user = {
        id: i,
        firstName: `firstName_${i}`,
        lastName: `lastName_${i}`,
        email: `email_${i}@example.com`,
        address: [
          `Street ${i + 1}, Address Line 1`,
          `District ${(i % 7) + 1}, City_${i}`,
        ],
      };
      users.push(user);
    }
    return users;
  };

Maintenant, nous devons installer quelques packages npm jspdf et jspdf-autotable.

jsPDF est responsable de la création des PDF, tandis que jsPDF-AutoTable est utilisé pour afficher les données sous forme de tableau dans le PDF.

Vous pouvez utiliser la commande suivante pour installer les deux packages.

npm i jspdf-autotable jspdf

Maintenant, nous allons développer une méthode pour gérer la création de PDF. Je vais créer une méthode générique generatePDF, afin que vous puissiez l'utiliser partout où vous en avez besoin.

1. Définition de la fonction

La fonction generatePDF prend les données comme argument, qui devraient être un tableau d'objets (les données JSON à inclure dans le PDF).

export const generatePDF = (data) => {

2. Configuration du document PDF
Une nouvelle instance jsPDF est créée avec les options suivantes :

• "l" pour l'orientation paysage.
• "pt" comme unité de mesure (points).
• "a3" comme format de papier.

const doc = new jsPDF("l", "pt", "a3");

// if you want to use custom dimensions
// width,height

const doc = new jsPDF("l", "pt", [3000,1000]);

3. Ajout d'un titre au PDF

• Définit la taille de la police sur 16 points.
• Ajoute un titre centré, "JSON Data PDF", en haut de la page (position y de 30).

doc.setFontSize(16);
doc.text("JSON Data PDF", doc.internal.pageSize.getWidth() / 2, 30, {
    align: "center",
});

4. Extraction des en-têtes de tableau

• Extrait les clés du premier objet des données à utiliser comme en-têtes de colonne pour le tableau.
• Suppose que les données contiennent au moins un objet et que tous les objets ont des clés similaires.

const tableColumnHeaders = Object.keys(data[0]);

5. Formatage des lignes du tableau

Itère sur chaque objet dans data, créant un nouveau tableau (tableRows) où :

• Chaque entrée correspond à une ligne du tableau.
• Pour chaque cellule, si la valeur est un tableau, elle joint les éléments par une virgule ; sinon, il ajoute la valeur telle quelle.

const tableRows = data.map((row) =>
    Object.keys(row).map((key) => {
        const value = row[key];
        if (Array.isArray(value)) {
            return value.join(", ");
        }
        return value;
    })
);

6. Ajout du tableau au PDF

Configure le tableau avec les options suivantes :

• startY : 50 positions le tableau 50 points en dessous du haut de la page.
• head utilise tableColumnHeaders comme ligne d’en-tête du tableau.
• body est rempli de tableRows, affichant les données ligne par ligne.
• margin spécifie l'espacement autour de la table.
• styles ajuste la taille de la police des cellules, le remplissage et l'alignement vertical.
• headStyles définit les styles de ligne d'en-tête : fond bleu, texte blanc et police de 12 points.
• alternateRowStyles ajoute un arrière-plan gris clair pour alterner les lignes.
• columnStyles tente de définir automatiquement la largeur des colonnes.
• thème : "rayé" applique un thème rayé à la table.

const generateUsers = (count) => {
    const users = [];

    for (let i = 1; i <= count; i++) {
      const user = {
        id: i,
        firstName: `firstName_${i}`,
        lastName: `lastName_${i}`,
        email: `email_${i}@example.com`,
        address: [
          `Street ${i + 1}, Address Line 1`,
          `District ${(i % 7) + 1}, City_${i}`,
        ],
      };
      users.push(user);
    }
    return users;
  };

7. Enregistrer le PDF
Enregistre le fichier PDF sous le nom de fichier "JS-pdf.pdf".

npm i jspdf-autotable jspdf

Voici la version complète de ce code.

export const generatePDF = (data) => {

const doc = new jsPDF("l", "pt", "a3");

// if you want to use custom dimensions
// width,height

const doc = new jsPDF("l", "pt", [3000,1000]);

C'est fait pour l'instant. J'espère que vous l'avez apprécié. Bonne journée !!!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!