So erstellen Sie PDFs in React aus JSON-Daten mit jsPDF

Dieser Artikel zeigt, wie man aus JSON-Daten PDFs in JS/React erstellt.

Als Entwickler müssen wir die PDF-Generierung in die Anwendung integrieren. In diesem Artikel besprechen wir die Erstellung von PDFs mit jspdf.

Also, fangen wir an.

Wir werden speziell für diesen Artikel eine React-Umgebung verwenden. Ich gehe davon aus, dass Sie mit JavaScript/React vertraut sind und die React-Umgebung bereits eingerichtet haben

Bevor wir loslegen, benötigen wir einige Beispieldaten, um das PDF zu erstellen. Wir erstellen eine Methode zum Generieren dieser Daten.

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;
  };

Jetzt müssen wir einige npm-Pakete jspdf und jspdf-autotable installieren.

jsPDF ist für die Erstellung von PDFs verantwortlich, während jsPDF-AutoTable zum Anzeigen von Daten in einem Tabellenformat innerhalb des PDFs verwendet wird.

Sie können den folgenden Befehl verwenden, um beide Pakete zu installieren.

npm i jspdf-autotable jspdf

Jetzt werden wir eine Methode zur PDF-Erstellung entwickeln. Ich erstelle eine generische Methode „generatePDF“, damit Sie sie überall verwenden können.

1. Funktionsdefinition

Die Funktion genericPDF verwendet Daten als Argument, bei denen es sich voraussichtlich um ein Array von Objekten handelt (die JSON-Daten, die in die PDF-Datei aufgenommen werden sollen).

export const generatePDF = (data) => {

2. PDF-Dokument-Setup
Eine neue jsPDF-Instanz wird mit den folgenden Optionen erstellt:

• „l“ für Querformat.
• „pt“ als Maßeinheit (Punkte).
• „a3“ als Papierformat.

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. Titel zum PDF hinzufügen

• Setzt die Schriftgröße auf 16 Punkt.
• Fügt oben auf der Seite einen zentrierten Titel „JSON Data PDF“ hinzu (y-Position 30).

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

4. Tabellenüberschriften extrahieren

• Extrahiert die Schlüssel aus dem ersten Objekt in den Daten, um sie als Spaltenüberschriften für die Tabelle zu verwenden.
• Angenommen, die Daten haben mindestens ein Objekt und alle Objekte haben ähnliche Schlüssel.

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

5. Tabellenzeilen formatieren

Iteriert jedes Objekt in den Daten und erstellt ein neues Array (tableRows), wobei:

• Jeder Eintrag entspricht einer Zeile der Tabelle.
• Wenn der Wert für jede Zelle ein Array ist, werden die Elemente durch ein Komma verbunden. andernfalls wird der Wert unverändert hinzugefügt.

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

6. Hinzufügen der Tabelle zum PDF

Konfiguriert die Tabelle mit den folgenden Optionen:

• startY: 50 positioniert die Tabelle 50 Punkte unter dem oberen Rand der Seite.
• head verwendet tableColumnHeaders als Kopfzeile der Tabelle.
• Der Körper wird mit Tabellenzeilen gefüllt und zeigt Daten Zeile für Zeile an.
• margin gibt den Abstand um die Tabelle an.
• Stile passen die Schriftgröße, den Abstand und die vertikale Ausrichtung der Zelle an.
• headStyles legt Kopfzeilenstile fest: blauer Hintergrund, weißer Text und 12-Punkt-Schriftart.
• alternativeRowStyles fügt einen hellgrauen Hintergrund für abwechselnde Zeilen hinzu.
• ColumnStyles versucht, die Spaltenbreite automatisch festzulegen.
• theme: „striped“ wendet ein gestreiftes Thema auf den Tisch an.

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. Speichern des PDF
Speichert die PDF-Datei mit dem Dateinamen „JS-pdf.pdf“.

npm i jspdf-autotable jspdf

Hier ist die Vollversion dieses Codes.

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]);

Dies ist vorerst erledigt. Hoffentlich hat es Ihnen gefallen. Ich wünsche Ihnen einen schönen Tag!!!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie PDFs in React aus JSON-Daten mit jsPDF. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!