Wie man eine PDF-Datei in React erstellt

Willkommen zum Tutorial über das Erstellen von PDF-Dokumenten aus einer React-Anwendung! In diesem Tutorial lernen wir verschiedene Bibliotheken zur PDF-Erzeugung kennen und erfahren, wie man mit der beliebten jsPDF-Bibliothek PDF-Dateien direkt aus React-Komponenten erstellt. Also, lassen Sie uns eintauchen und loslegen!

PDF (Portable Document Format) ist ein weit verbreitetes Dateiformat zum Teilen und Drucken von Dokumenten, bei dem das Layout und die Formatierung erhalten bleiben. Als React-Webentwickler werden Sie vielleicht auf Szenarien stoßen, in denen Sie PDF-Dokumente wie Rechnungen, Berichte oder Verkaufsverträge direkt aus Ihrer React-Anwendung generieren müssen.

Auswahl einer React PDF-Bibliothek

Die Erstellung von PDF-Dokumenten in einer React-Anwendung kann eine entmutigende Aufgabe sein, vor allem, wenn Sie neu in diesem Bereich sind. Zum Glück stehen uns mehrere Bibliotheken von Drittanbietern zur Verfügung, die diesen Prozess erheblich vereinfachen. Jede Bibliothek verfügt über ihre eigenen einzigartigen Funktionen und Dienstprogramme, die auf unterschiedliche Anwendungsfälle zugeschnitten sind. Schauen wir uns diese Bibliotheken etwas genauer an.

jsPDF

jsPDF ist eine unter Entwicklern weit verbreitete Bibliothek zur Erzeugung von PDF-Dateien aus JavaScript. Eines der Hauptargumente ist seine Einfachheit. Die Syntax und die Verwendung sind recht einfach, so dass Sie Ihre HTML-Inhalte im Handumdrehen in eine PDF-Datei umwandeln können.

Es ermöglicht Ihnen, die Formatierung und das Layout Ihrer PDFs zu steuern, von der Änderung der Schriftgröße und -farbe bis hin zur Anpassung der Seitenausrichtung und -größe. jsPDF ist eine robuste Lösung, die sowohl in Browser- als auch in Serverumgebungen funktioniert und somit eine ausgezeichnete Wahl für eine breite Palette von JavaScript-Anwendungen darstellt.

pdfmake

pdfmake zeichnet sich als Client/Server-seitige PDF-Drucklösung in reinem JavaScript aus. Diese Bibliothek ist dank ihrer umfassenden API und flexiblen Layout-Optionen eine ausgezeichnete Wahl für die Erstellung komplexerer PDFs. Mit pdfmake können Sie den Inhalt und die Struktur Ihres Dokuments mithilfe eines einfachen JavaScript-Objekts definieren und es dann in ein gültiges PDF-Dokument umwandeln.

React-PDF

React-PDF ist eine einzigartige Bibliothek, die leistungsstarke Funktionen zur Erstellung von PDF-Dateien mit React-Komponenten bietet. Anstatt die Dokumentstruktur manuell in ein JavaScript-Objekt zu schreiben, können Sie Ihre PDF-Datei genauso erstellen, wie Sie eine typische React-Anwendung erstellen würden - mit wiederverwendbaren Komponenten und Requisiten. Die IronPDF-Website bietet ein Tutorial zur Erstellung von PDFs mit der React-PDF-Bibliothek.

Warum jsPDF wählen?

Alle drei Bibliotheken bieten leistungsstarke Werkzeuge zur Erzeugung von PDF-Dokumenten in React. In diesem Tutorial werden wir jsPDF verwenden, da es einfach und flexibel ist und in der Community weit verbreitet ist. Es bietet Anfängern eine niedrigere Einstiegshürde, und seine robusten Funktionen machen es zu einer geeigneten Wahl für viele Anwendungsfälle. Die Prinzipien, die wir mit jsPDF erforschen werden, geben Ihnen eine solide Grundlage für die Erstellung von PDFs, und Sie werden in der Lage sein, andere Bibliotheken leichter zu übernehmen, wenn Ihr Projekt dies erfordert.

Voraussetzungen

Bevor wir in dieses Tutorial eintauchen, sollten Sie sicherstellen, dass Sie mit den notwendigen Werkzeugen und Kenntnissen ausgestattet sind, um reibungslos mitarbeiten zu können. Die Voraussetzungen für dieses Lernprogramm sind wie folgt:

Grundlegendes Verständnis von React

In erster Linie sollten Sie ein grundlegendes Verständnis von React haben, einer beliebten JavaScript-Bibliothek für die Erstellung von Benutzeroberflächen, insbesondere von einseitigen Anwendungen. Sie sollten mit Konzepten wie JSX (JavaScript XML), Komponenten, Zustand (State) und Eigenschaften (Props) in React vertraut sein.

Entwicklungsumgebung

Sie sollten auch eine Entwicklungsumgebung auf Ihrem Computer eingerichtet haben, um React-Anwendungen zu erstellen. Dies umfasst einen Texteditor oder eine Integrierte Entwicklungsumgebung (IDE). Texteditoren wie Visual Studio Code, Atom oder Sublime Text sind allesamt gute Optionen.

Node.js und npm

Um unser Projekt und seine Abhängigkeiten zu verwalten, werden wir Node.js und npm (Node Package Manager) verwenden. Stellen Sie sicher, dass Sie Node.js auf Ihrem Computer installiert haben. Node.js ist eine JavaScript-Laufzeitumgebung, mit der wir JavaScript auf unseren Servern ausführen können. Es kommt mit npm installiert, so dass Sie Bibliotheken für Ihr Projekt erforderlich verwalten können.

Sie können überprüfen, ob Node.js und npm installiert sind, indem Sie die folgenden Terminalbefehle ausführen:

node -v
npm -v

node -v
npm -v

Diese Befehle zeigen die Version von Node.js bzw. npm an, die auf Ihrem System installiert ist. Falls Sie diese nicht installiert haben oder Ihre Versionen veraltet sind, sollten Sie die neueste Long Term Support (LTS) Version von Node.js von deren offizieller Download-Seite herunterladen und installieren.

Schritt 1: Einrichten des Projekts

Beginnen wir mit dem Einrichten unseres React-Projekts. Öffnen Sie Ihr Terminal und navigieren Sie zu dem gewünschten Verzeichnis, in dem Sie Ihr Projekt erstellen möchten. Führen Sie den folgenden Befehl aus, um eine neue React-Anwendung zu erstellen:

npx create-react-app pdf-from-react

npx create-react-app pdf-from-react

Dieser Befehl erstellt ein neues Verzeichnis namens pdf-from-react mit einer grundlegenden React-Projektstruktur.

Wechseln Sie dann in das Projektverzeichnis:

cd pdf-from-react

cd pdf-from-react

Nun können wir das Projekt in unserem Code-Editor öffnen und mit der Implementierung fortfahren.

Schritt 2: Hinzufügen der erforderlichen Abhängigkeiten

Zunächst müssen wir die erforderlichen Pakete installieren. Installieren Sie react, react-dom, @mui/material und jspdf mit dem folgenden Terminalbefehl.

npm install jspdf @mui/material @emotion/react @emotion/styled @mui/icons-material

npm install jspdf @mui/material @emotion/react @emotion/styled @mui/icons-material

Schritt 3: Erstellung der PDF-Erzeugungsfunktion

Bibliotheken importieren

Zunächst importieren wir die erforderlichen Abhängigkeiten für unsere Anwendung. Diese umfassen verschiedene Komponenten aus der Material-UI-Bibliothek, die jsPDF-Bibliothek zur Generierung von PDFs und Styling-Utilities.

import React, { useState } from "react";
import "./App.css";
import {
  Button,
  TextField,
  Box,
  Container,
  Typography,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  IconButton,
  Snackbar,
  Alert,
} from "@mui/material";
import Grid from "@mui/material/Grid";
import DeleteIcon from "@mui/icons-material/Delete";
import jsPDF from "jspdf";
import { styled } from "@mui/material/styles";
import { tableCellClasses } from "@mui/material/TableCell";

jsx

Erstellen gestalteter Komponenten

Um ein konsistentes Cross-Browser-Verhalten zu unserer App hinzuzufügen, haben wir das styled-Hilfsmittel aus der MUI-Bibliothek verwendet, um StyledTableCell und StyledTableRow zu erstellen.

const StyledTableCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  [`&.${tableCellClasses.body}`]: {
    fontSize: 14,
  },
}));

const StyledTableRow = styled(TableRow)(({ theme }) => ({
  "&:nth-of-type(odd)": {
    backgroundColor: theme.palette.action.hover,
  },
  "&:last-child td, &:last-child th": {
    border: 0,
  },
}));

jsx

Erstellen der App-Komponente

Die Hauptkomponente unserer Anwendung ist die App-Komponente. Wir haben vier Zustandsvariablen: customerName und customerAddress, um die Kundendaten zu verfolgen, items, um die Liste der Artikel auf der Rechnung zu verfolgen, und error, um bei Bedarf eine Fehlermeldung anzuzeigen.

function App() {
  // State variables
  const [customerName, setCustomerName] = useState("");
  const [customerAddress, setCustomerAddress] = useState("");
  const [items, setItems] = useState([{ name: "", quantity: "", price: "" }]);
  const [error, setError] = useState(false);

jsx

Umgang mit Benutzereingaben

In diesem Codeblock haben wir Funktionen für Benutzerinteraktionen definiert: Ändern von Artikeldetails, Hinzufügen eines neuen Artikels und Löschen eines Artikels. Die handleItemChange-Funktion aktualisiert die Eigenschaften eines Elements, wenn ein Benutzer diese ändert. Die addItem-Funktion fügt der Liste ein neues Element hinzu. Die deleteItem-Funktion entfernt ein Element aus der Liste.

const handleItemChange = (index, event) => {
  let newItems = [...items];
  newItems[index][event.target.name] = event.target.value;
  setItems(newItems);
};

const addItem = () => {
  setItems([...items, { name: "", quantity: "", price: "" }]);
};

const deleteItem = (index) => {
  let newItems = [...items];
  newItems.splice(index, 1);
  setItems(newItems);
};

jsx

Erzeugen der Rechnung

Das Folgende ist der Code der generateInvoice-Funktion:

// Generate invoice
const generateInvoice = () => {
  // Validate the input fields
  if (
    !customerName 

    !customerAddress 

    items.some((item) => !item.name 
 !item.quantity 
 !item.price)
  ) {
    setError(true);
    return;
  }

  // Create a new jsPDF instance
  let doc = new jsPDF("p", "pt");

  // Add invoice header
  doc.setFontSize(24);
  doc.text("Invoice", 40, 60);
  doc.setFontSize(10);
  doc.text("Invoice Number: 123456", 40, 90);
  doc.text("Date: " + new Date().toDateString(), 40, 110);
  doc.text(`Customer Name: ${customerName}`, 40, 130);
  doc.text(`Customer Address: ${customerAddress}`, 40, 150);

  // Add items section
  doc.setFontSize(14);
  doc.text("Items:", 40, 200);
  doc.line(40, 210, 550, 210);

  // Add item details
  doc.setFontSize(12);
  let yOffset = 240;
  let total = 0;

  items.forEach((item) => {
    let itemTotal = item.quantity * item.price;
    total += itemTotal;

    doc.text(`Item: ${item.name}`, 40, yOffset);
    doc.text(`Quantity: ${item.quantity}`, 200, yOffset);
    doc.text(`Price: $${item.price}`, 300, yOffset);
    doc.text(`Total: $${itemTotal}`, 400, yOffset);

    yOffset += 20;
  });

  // Add total
  doc.line(40, yOffset, 550, yOffset);
  doc.setFontSize(14);
  doc.text(`Total: $${total}`, 400, yOffset + 30);

  // Save the generated PDF as "invoice.pdf"
  doc.save("invoice.pdf");

  // Reset error state
  setError(false);
};

jsx

In der generateInvoice-Funktion führen wir zunächst eine Validierung der Eingabefelder durch, um sicherzustellen, dass der Kundenname, die Kundenadresse und die Artikeldetails ausgefüllt sind. Wenn eines dieser Felder leer ist, setzen wir den error-Zustand auf true und geben sofort zurück.

Als Nächstes erstellen wir eine neue Instanz von jsPDF, indem wir new jsPDF("p", "pt") aufrufen. Das erste Argument "p" legt die Seitenausrichtung als Hochformat fest, und das zweite Argument "pt" gibt die Maßeinheit in Punkten an.

Anschließend fügen wir den Inhalt zu unserem PDF-Dokument hinzu. Wir legen die Schriftgröße mit doc.setFontSize fest und verwenden die doc.text-Methode, um Text an bestimmten Koordinaten auf der Seite hinzuzufügen. Wir fügen den Rechnungskopf hinzu, einschließlich Titel, Rechnungsnummer, Datum, Kundenname und Kundenadresse.

Nach der Kopfzeile fügen wir den Abschnitt "Items" hinzu, indem wir die Schriftgröße festlegen und eine Linie mithilfe von doc.line hinzufügen, um die Items von der Kopfzeile zu trennen. Als Nächstes iterieren wir über jedes Element im items-Array und berechnen den Gesamtpreis für jedes Element, indem wir die Menge mit dem Preis multiplizieren. Wir aktualisieren die total-Variable mit der Summe aller Einzelpreise.

Für jeden Artikel verwenden wir doc.text, um den Artikelnamen, die Menge, den Preis und die Zwischensumme zum PDF-Dokument hinzuzufügen. Wir erhöhen die yOffset-Variable, um für jedes Element zur nächsten Zeile zu gelangen. Schließlich fügen wir eine Linie hinzu, um die Artikel vom Gesamtbetrag zu trennen, und verwenden doc.text, um den Gesamtbetrag unten rechts im Dokument hinzuzufügen.

Sobald der Inhalt hinzugefügt ist, verwenden wir doc.save("invoice.pdf"), um das generierte PDF als "invoice.pdf" auf dem Computer des Benutzers zu speichern. Schließlich setzen wir den error-Zustand auf false zurück, um vorherige Validierungsfehler zu löschen.

Schritt 4: Rendering der Benutzeroberfläche

Die return-Anweisung enthält den JSX-Code, der den Rendering-Prozess behandelt. Es enthält Eingabefelder für den Kundennamen und die Adresse, eine Tabelle zur Eingabe von Artikeldetails, Schaltflächen zum Hinzufügen von Artikeln und zum Erstellen der Rechnung sowie eine Fehler-Snackbar zur Anzeige von Validierungsfehlern.

Es verwendet Komponenten aus der Material-UI-Bibliothek, wie zum Beispiel Button, TextField, Box, Container, Typography, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, IconButton, Snackbar und Alert, um grundlegende Komponenten zu erstellen. Diese Komponenten werden verwendet, um die Formularfelder, Tabellen, Schaltflächen und Fehlermeldungen zu erstellen.

return (
  <Container maxWidth="md">
    <Box sx={{ my: 4 }}>
      <Typography variant="h3" component="h1" gutterBottom>
        Create Invoice
      </Typography>

      {/* Customer Name and Address fields */}
      <Grid container spacing={3}>
        <Grid item xs={6}>
          <TextField
            label="Customer Name"
            fullWidth
            margin="normal"
            value={customerName}
            onChange={(e) => setCustomerName(e.target.value)}
          />
        </Grid>
        <Grid item xs={6}>
          <TextField
            label="Customer Address"
            fullWidth
            margin="normal"
            value={customerAddress}
            onChange={(e) => setCustomerAddress(e.target.value)}
          />
        </Grid>
      </Grid>

      {/* Items table */}
      <TableContainer component={Paper}>
        <Table sx={{ minWidth: 700 }} aria-label="invoice table">
          <TableHead>
            <TableRow>
              <StyledTableCell>Item Name</StyledTableCell>
              <StyledTableCell align="left">Quantity</StyledTableCell>
              <StyledTableCell align="left">Price</StyledTableCell>
              <StyledTableCell align="left">Action</StyledTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {items.map((item, index) => (
              <StyledTableRow key={index}>
                <StyledTableCell component="th" scope="row">
                  <TextField
                    fullWidth
                    value={item.name}
                    onChange={(event) => handleItemChange(index, event)}
                    name="name"
                  />
                </StyledTableCell>
                <StyledTableCell align="right">
                  <TextField
                    fullWidth
                    value={item.quantity}
                    onChange={(event) => handleItemChange(index, event)}
                    name="quantity"
                  />
                </StyledTableCell>
                <StyledTableCell align="right">
                  <TextField
                    fullWidth
                    value={item.price}
                    onChange={(event) => handleItemChange(index, event)}
                    name="price"
                  />
                </StyledTableCell>
                <StyledTableCell align="right">
                  <IconButton onClick={() => deleteItem(index)}>
                    <DeleteIcon />
                  </IconButton>
                </StyledTableCell>
              </StyledTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>

      {/* Buttons */}
      <Box mt={2} display="flex" gap={2}>
        <Button variant="contained" onClick={addItem}>
          Add Item
        </Button>
        <Button variant="outlined" color="success" onClick={generateInvoice}>
          Generate Invoice
        </Button>
      </Box>
    </Box>

    {/* Error Snackbar */}
    <Snackbar
      open={error}
      autoHideDuration={6000}
      onClose={() => setError(false)}
      anchorOrigin={{ vertical: "top", horizontal: "right" }}
    >
      <Alert onClose={() => setError(false)} severity="error">
        Please fill in all required fields.
      </Alert>
    </Snackbar>
  </Container>
);

jsx

Vollständiger App.js und App.css Code

Hier ist der vollständige App.js-Code, den Sie kopieren und in Ihr Projekt einfügen können:

import React, { useState } from "react";
import "./App.css";
import {
  Button,
  TextField,
  Box,
  Container,
  Typography,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  IconButton,
  Snackbar,
  Alert,
} from "@mui/material";
import Grid from "@mui/material/Grid";
import DeleteIcon from "@mui/icons-material/Delete";
import jsPDF from "jspdf";
import { styled } from "@mui/material/styles";
import { tableCellClasses } from "@mui/material/TableCell";

const StyledTableCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  [`&.${tableCellClasses.body}`]: {
    fontSize: 14,
  },
}));

const StyledTableRow = styled(TableRow)(({ theme }) => ({
  "&:nth-of-type(odd)": {
    backgroundColor: theme.palette.action.hover,
  },
  "&:last-child td, &:last-child th": {
    border: 0,
  },
}));

function App() {
  // State variables
  const [customerName, setCustomerName] = useState("");
  const [customerAddress, setCustomerAddress] = useState("");
  const [items, setItems] = useState([{ name: "", quantity: "", price: "" }]);
  const [error, setError] = useState(false);

  // Event handler for item changes
  const handleItemChange = (index, event) => {
    let newItems = [...items];
    newItems[index][event.target.name] = event.target.value;
    setItems(newItems);
  };

  // Add new item to the list
  const addItem = () => {
    setItems([...items, { name: "", quantity: "", price: "" }]);
  };

  // Delete an item from the list
  const deleteItem = (index) => {
    let newItems = [...items];
    newItems.splice(index, 1);
    setItems(newItems);
  };

  // Generate invoice
  const generateInvoice = () => {
    // Validate the input fields
    if (
      !customerName 

      !customerAddress 

      items.some((item) => !item.name 
 !item.quantity 
 !item.price)
    ) {
      setError(true);
      return;
    }

    // Create a new jsPDF instance
    let doc = new jsPDF("p", "pt");

    // Add invoice header
    doc.setFontSize(24);
    doc.text("Invoice", 40, 60);
    doc.setFontSize(10);
    doc.text("Invoice Number: 123456", 40, 90);
    doc.text("Date: " + new Date().toDateString(), 40, 110);
    doc.text(`Customer Name: ${customerName}`, 40, 130);
    doc.text(`Customer Address: ${customerAddress}`, 40, 150);

    // Add items section
    doc.setFontSize(14);
    doc.text("Items:", 40, 200);
    doc.line(40, 210, 550, 210);

    // Add item details
    doc.setFontSize(12);
    let yOffset = 240;
    let total = 0;

    items.forEach((item) => {
      let itemTotal = item.quantity * item.price;
      total += itemTotal;

      doc.text(`Item: ${item.name}`, 40, yOffset);
      doc.text(`Quantity: ${item.quantity}`, 200, yOffset);
      doc.text(`Price: $${item.price}`, 300, yOffset);
      doc.text(`Total: $${itemTotal}`, 400, yOffset);

      yOffset += 20;
    });

    // Add total
    doc.line(40, yOffset, 550, yOffset);
    doc.setFontSize(14);
    doc.text(`Total: $${total}`, 400, yOffset + 30);

    // Save the generated PDF as "invoice.pdf"
    doc.save("invoice.pdf");

    // Reset error state
    setError(false);
  };

  return (
    <Container maxWidth="md">
      <Box sx={{ my: 4 }}>
        <Typography variant="h3" component="h1" gutterBottom>
          Create Invoice
        </Typography>

        {/* Customer Name and Address fields */}
        <Grid container spacing={3}>
          <Grid item xs={6}>
            <TextField
              label="Customer Name"
              fullWidth
              margin="normal"
              value={customerName}
              onChange={(e) => setCustomerName(e.target.value)}
            />
          </Grid>
          <Grid item xs={6}>
            <TextField
              label="Customer Address"
              fullWidth
              margin="normal"
              value={customerAddress}
              onChange={(e) => setCustomerAddress(e.target.value)}
            />
          </Grid>
        </Grid>

        {/* Items table */}
        <TableContainer component={Paper}>
          <Table sx={{ minWidth: 700 }} aria-label="invoice table">
            <TableHead>
              <TableRow>
                <StyledTableCell>Item Name</StyledTableCell>
                <StyledTableCell align="left">Quantity</StyledTableCell>
                <StyledTableCell align="left">Price</StyledTableCell>
                <StyledTableCell align="left">Action</StyledTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {items.map((item, index) => (
                <StyledTableRow key={index}>
                  <StyledTableCell component="th" scope="row">
                    <TextField
                      fullWidth
                      value={item.name}
                      onChange={(event) => handleItemChange(index, event)}
                      name="name"
                    />
                  </StyledTableCell>
                  <StyledTableCell align="right">
                    <TextField
                      fullWidth
                      value={item.quantity}
                      onChange={(event) => handleItemChange(index, event)}
                      name="quantity"
                    />
                  </StyledTableCell>
                  <StyledTableCell align="right">
                    <TextField
                      fullWidth
                      value={item.price}
                      onChange={(event) => handleItemChange(index, event)}
                      name="price"
                    />
                  </StyledTableCell>
                  <StyledTableCell align="right">
                    <IconButton onClick={() => deleteItem(index)}>
                      <DeleteIcon />
                    </IconButton>
                  </StyledTableCell>
                </StyledTableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>

        {/* Buttons */}
        <Box mt={2} display="flex" gap={2}>
          <Button variant="contained" onClick={addItem}>
            Add Item
          </Button>
          <Button variant="outlined" color="success" onClick={generateInvoice}>
            Generate Invoice
          </Button>
        </Box>
      </Box>

      {/* Error Snackbar */}
      <Snackbar
        open={error}
        autoHideDuration={6000}
        onClose={() => setError(false)}
        anchorOrigin={{ vertical: "top", horizontal: "right" }}
      >
        <Alert onClose={() => setError(false)} severity="error">
          Please fill in all required fields.
        </Alert>
      </Snackbar>
    </Container>
  );
}
export default App;

jsx

Hier ist der App.css-Code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  /* This is the weight for bold in Poppins */
  color: #FF6347;
  /* This is the color Tomato. Replace with your preferred color */
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #E9F8F4;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Schritt 5: Testen der Anwendung

Um die PDF-Erzeugungsfunktion zu testen, führen Sie den folgenden Befehl im Terminal aus:

npm start

npm start

Dies wird den Entwicklungsserver starten, und Sie können die Anwendung in Ihrem Browser unter http://localhost:3000 anzeigen.

Geben Sie den Kundennamen, die Adresse und die Artikeldetails in die Eingabefelder ein und klicken Sie auf die Schaltfläche "Rechnung erstellen". Die PDF-Datei wird auf Ihren Computer heruntergeladen, und Sie können sie öffnen, um eine ganzseitige Ansicht der erstellten Rechnung zu sehen.

Wenn Sie auf die Schaltfläche "Rechnung generieren" klicken, wird die PDF-Datei erstellt.

Wenn Sie versuchen, eine PDF-Datei mit einem leeren Feld zu erstellen, wird in der oberen rechten Ecke eine Fehlermeldung angezeigt.

IronPDF - Die Node.js PDF-Bibliothek

IronPDF for Node.js ist eine umfassende Node.js PDF-Bibliothek, die sich durch Genauigkeit, Benutzerfreundlichkeit und Geschwindigkeit auszeichnet. Es bietet eine Vielzahl von Funktionen zur Erzeugung, Bearbeitung und Formatierung von PDFs direkt aus HTML, URLs und Bildern in React. Durch die Unterstützung verschiedener Plattformen wie Windows, MacOS, Linux, Docker und Cloud-Plattformen wie Azure und AWS gewährleistet IronPDF plattformübergreifende Kompatibilität. Die benutzerfreundliche API ermöglicht es Entwicklern, PDF-Erzeugung und -Bearbeitung schnell in ihre Node.js-Projekte zu integrieren.

Zu den bemerkenswerten Funktionen von IronPDF for Node.js gehören: pixelgenaues Rendering, umfangreiche Formatierungsoptionen und erweiterte Bearbeitungsfunktionen wie das Zusammenführen und Aufteilen von PDFs, das Hinzufügen von Anmerkungen und das Erstellen von PDF-Formularen.

Hier ist ein Beispiel für die Erstellung eines PDF-Dokuments aus einer HTML-Datei, einem HTML-String und einer URL:

import { PdfDocument } from "@ironsoftware/ironpdf";

(async () => {
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    await pdfFromUrl.saveAs("website.pdf");

    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    await pdfFromHtmlFile.saveAs("markup.pdf");

    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();

js

Für weitere Code-Beispiele zu PDF-bezogenen Aufgaben besuchen Sie bitte diese IronPDF-Codebeispielseite.

Schlussfolgerung

Zusammenfassend lässt sich sagen, dass die Erstellung von PDFs in einer React-Anwendung nicht einschüchternd sein muss. Mit den richtigen Werkzeugen und einem klaren Verständnis können Sie mühelos schöne, gut strukturierte PDF-Dokumente erstellen. Wir haben verschiedene Bibliotheken wie jsPDF, pdfmake und React-PDF erforscht, jede mit ihren eigenen Stärken und einzigartigen Funktionen.

Mit dem unkomplizierten Integrationsprozess von IronPDF für Frameworks und Bibliotheken in JavaScript, ausgezeichneter Dokumentation und reaktionsschnellem technischen Support können Entwickler in kürzester Zeit loslegen, was es zur ersten Wahl für die Erstellung von professionellen PDFs in Node.js-Anwendungen macht.

IronPDF bietet eine kostenlose Testversion seiner vollständigen Funktionalität an. Es ist auch für andere Sprachen wie C# .NET, Java und Python verfügbar. Besuchen Sie die IronPDF-Website für weitere Informationen.