Nachrichten-Symbol
  1. IronPDF
  2. IronPDF-Blog
  3. Knotenpunkt-PDF-Werkzeuge
  4. React PDF Generator
PDF-WERKZEUGE

Wie man eine PDF-Datei in React erstellt

Veröffentlicht 24. August 2023
Teilen Sie:

Willkommen zum Tutorial über die Erstellung 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. Lassen Sie uns also eintauchen und loslegen!

PDF (Portable Document Format) ist ein weit verbreitetes Dateiformat für die gemeinsame Nutzung und den Druck von Dokumenten, wobei Layout und 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 eine Anleitung 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 vertraut sein (JavaScript XML)komponenten, Zustand und Requisiten in React.

Entwicklungsumgebung

Sie sollten auch eine Entwicklungsumgebung auf Ihrem Computer eingerichtet haben, um React-Anwendungen zu erstellen. Dazu gehört ein 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 verwenden (Node-Paketmanager). 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

Diese Befehle zeigen die Version von Node.js bzw. npm an, die auf Ihrem System installiert ist. Wenn Sie diese nicht installiert haben oder Ihre Versionen veraltet sind, sollten Sie den neuesten Long Term Support herunterladen und installieren (LTS) version von Node.js von ihrem offizielle Website.

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

Wie man eine PDF-Datei in React erstellt: Abbildung 1 - Ein Screenshot des Terminals, der den obigen Befehl anzeigt.

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

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

Schritt 3: Erstellung der PDF-Erzeugungsfunktion

Bibliotheken importieren

Zunächst importieren wir die erforderlichen Abhängigkeiten für unsere Anwendung. Dazu gehören verschiedene Komponenten aus der Material-UI-Bibliothek, die jsPDF-Bibliothek zur Erzeugung 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";
JAVASCRIPT

Erstellen gestalteter Komponenten

Um unserer Anwendung ein konsistentes browserübergreifendes Verhalten zu verleihen, haben wir das Dienstprogramm styled 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,
  },
}));
JAVASCRIPT

Erstellen der App-Komponente

Die Hauptkomponente unserer Anwendung ist die Komponente "App". Wir haben vier Statusvariablen: customerName und customerAddress, um die Daten des Kunden zu verfolgen, items, um die Liste der Artikel in 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);
JAVASCRIPT

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 Funktion handleItemChange aktualisiert die Eigenschaften eines Eintrags, wenn ein Benutzer sie ändert. Die Funktion addItem fügt einen neuen Eintrag in die Liste ein. Die Funktion deleteItem 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);
};
JAVASCRIPT

Erzeugen der Rechnung

Es folgt der Code der Funktion "generateInvoice":

// 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);
};
JAVASCRIPT

In der Funktion "generateInvoice" 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 Status Fehler auf true und kehren vorzeitig zurück.

Als nächstes erstellen wir eine neue Instanz von jsPDF durch den Aufruf von new jsPDF("p", "pt"). Das erste Argument "p" gibt die Seitenausrichtung als Hochformat an, und das zweite Argument "p" gibt die Maßeinheit als Punkt an.

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

Nach der Kopfzeile fügen wir den Abschnitt "Items" ein, indem wir die Schriftgröße einstellen und mit doc.line eine Zeile hinzufügen, um die Items von der Kopfzeile zu trennen. Als Nächstes durchlaufen wir jeden Artikel im Array items und berechnen den Gesamtpreis für jeden Artikel, indem wir die Menge mit dem Preis multiplizieren. Wir aktualisieren die Variable "Total" mit der Summe aller Gesamtsummen der Artikel.

Für jeden Artikel verwenden wir doc.text, um den Artikelnamen, die Menge, den Preis und die Gesamtsumme in das PDF-Dokument einzufügen. Wir erhöhen die Variable "yOffset", um für jedes Element in die nächste Zeile zu gelangen. Zum Schluss fügen wir eine Zeile hinzu, um die einzelnen Posten von der Gesamtsumme zu trennen, und verwenden doc.text, um den Gesamtbetrag unten rechts im Dokument einzufügen.

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

Schritt 4: Rendering der Benutzeroberfläche

Die "Return"-Anweisung enthält den JSX-Code, der den Rendering-Prozess abwickelt. 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 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>
);
JAVASCRIPT

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

Hier ist der Code der "App.css":

@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

Dadurch wird der Entwicklungsserver gestartet, und Sie können die Anwendung in Ihrem Browser unter http://localhost:3000 betrachten.

How to Create A PDF File in React - Abbildung 2: Die ausgefüllte Rechnungsanwendung mit den standardmäßigen, nicht ausgefüllten Feldern.

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.

How to Create A PDF File in React - Abbildung 3: Die Anwendung mit drei ausgefüllten Positionen, mit unterschiedlichen Artikeln, Mengen und Preisen.

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

Wie man eine PDF-Datei in React erstellt - Abbildung 4: Das generierte PDF.

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

How to Create A PDF File in React - Abbildung 5: Eine Fehlermeldung wird angezeigt, da nicht alle Felder ausgefüllt wurden.

IronPDF - Die Node.js PDF-Bibliothek

IronPDF 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 wichtigsten 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 HTML-Datei, HTML-String, und 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");
})();
JAVASCRIPT

Weitere Code-Beispiele für PDF-bezogene Aufgaben finden Sie hier code-Beispiele seite.

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 IronPDFs unkompliziertem Integrationsprozess für Frameworks und Bibliotheken in JavaScript lassen sich hervorragende dokumentationund reaktionsschnellem technischem Support können Entwickler in kürzester Zeit loslegen, was es zu einer ersten Wahl für die Erstellung professioneller PDFs in Node.js-Anwendungen macht.

IronPDF bietet eine kostenloser Test um seine vollständige Funktionalität zu testen. Es ist auch für andere Sprachen verfügbar wie C# .NET, Java und Python. Besuchen Sie die IronPDF website für weitere Einzelheiten.

< PREVIOUS
JavaScript PDF Editor (Tutorial für Entwickler)
NÄCHSTES >
Wie man PDF-Dateien in JavaScript erstellt

Installation mit npm

Version:2024.9

> npm i @ironsoftware/ironpdf

Ein Problem melden

Sind Sie bereit, loszulegen? Version: 2024.9 gerade veröffentlicht

Kostenlose npm-Installation Lizenzen anzeigen >

Holen Sie sich Ihr FREE

30-Tage-Testschlüssel sofort.

15-Tage-Probe-Schlüssel sofort.

bullet_checkedKeine Kreditkarte oder Kontoerstellung erforderlich
Das Versuchsformular wurde eingereicht
erfolgreich.

Ihr Testschlüssel sollte in der E-Mail enthalten sein.
Sollte dies nicht der Fall sein, wenden Sie sich bitte an
support@ironsoftware.com

schuss_testTest in der Produktion
ohne Wasserzeichen
aufzählungszeichen_Kalender30 Tage vollständig
funktionsfähiges Produkt
aufzählungszeichen_Unterstützung24/5 technisch
unterstützung während des Prozesses

Ich danke Ihnen!

Ihr Lizenzschlüssel wurde an die angegebene E-Mail-Adresse gesendet.Kontakt

24-Stunden-Upgrade-Angebot:

Save 50% in einem
Professional Upgrade

Weiter Professional für 10 Entwickler
und unbegrenzte Projekte.

stunden

:

minuten

:

sekunden

Upgrade auf Professional

Upgrade

Professional

$600 USD

$299 USD

  • 10 Entwickler
  • 10 Standorte
  • 10 Projekte
HEUTE NUR

5 .NET-Produkte zum Preis von 2

IronPDF IronOCR IronXL IronBarcode IronWebscraper

Gesamtwert der Suite:

$7,192 USD

Upgrade-Preis

HEUTE
NUR

$499 USD

Nach 24 Std

$1,098 USD

Kostenlos testen

Voll funktionsfähiges Produkt, sofortiger Erhalt des Schlüssels