PDF-WERKZEUGE

Wie man HTML in PDF in React konvertiert (Entwickler-Tutorial)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Darrius Serrant

Aktualisiert:Juli 28, 2025

Converting HTML to PDF in React

Das Umwandeln von HTML in PDF in React ist zu einem wesentlichen Merkmal für viele Webanwendungen geworden. Egal, ob Sie ein Abrechnungssystem, einen Berichtsgenerator erstellen oder Informationen in einem allgemein akzeptierten Format teilen müssen, die PDF-Generierung ist entscheidend. In diesem Artikel werden wir untersuchen, wie man PDF-Dateien in Ihrer React-Anwendung erstellt und gestaltet, indem man HTML mit beliebten Bibliotheken in PDF umwandelt.

class="hsg-featured-snippet">

Wie man HTML in PDF in React umwandelt

Erstellen und konfigurieren Sie ein React-Projekt
Laden Sie die Bibliothek herunter, um HTML in PDF in React mit npm umzuwandeln
Importieren Sie die notwendigen Module aus React-pdf/render
Konfigurieren Sie die HTML-Seite mit den importierten Modulen
Verwenden Sie das PDFDownloadLink Modul von React-pdf, um das HTML in PDF umzuwandeln

Beliebte Bibliotheken zur PDF-Erzeugung

Bevor wir uns in den Prozess der Umwandlung von HTML in PDF vertiefen, lassen Sie uns einige beliebte Bibliotheken diskutieren, die Sie für die PDF-Erzeugung in Ihren React-Anwendungen verwenden können:

React-pdf: Eine leistungsstarke Bibliothek zur Erstellung von PDF-Dokumenten in React-Anwendungen. Sie unterstützt verschiedene Styling-Optionen und kann komplexe, mehrseitige PDFs mühelos erstellen.
jsPDF: Eine weit verbreitete JavaScript-Bibliothek zur spontanen Generierung von PDF-Dateien. Sie bietet eine breite Palette von Funktionen, einschließlich Textgestaltung, Einbettung von Bildern und mehr.
html2canvas: Diese Bibliothek ermöglicht es Ihnen, einen Screenshot eines HTML-Elements aufzunehmen und in ein Canvas-Objekt umzuwandeln, das dann mit anderen Bibliotheken wie jsPDF in ein PDF umgewandelt werden kann.

Voraussetzungen für die Umwandlung von HTML in PDF in React

Familiarität mit React und seinem Ökosystem

Bevor Sie sich in die Umwandlung von HTML in PDF vertiefen, ist es wichtig, ein solides Verständnis von React zu haben. Dazu gehört das Wissen über JSX, Zustandsverwaltung, Komponenten-Lebenszyklen und Hooks.

Verständnis von HTML, CSS und JavaScript

Ein starkes Fundament in HTML, CSS und JavaScript ist essenziell für die Arbeit mit der React-pdf Bibliothek. Dazu gehören Kenntnisse über HTML-Elemente und Attribute, CSS-Styling und Selektoren sowie grundlegende JavaScript-Konzepte wie Variablen, Funktionen und Schleifen.

Einführung in eine React-Anwendung

Bevor wir mit der Umwandlung von HTML in PDF in React fortfahren, lassen Sie uns schnell durchgehen, wie man eine neue React-Anwendung mit dem beliebten create-react-app CLI-Tool erstellt. Dies wird als Grundlage für unser PDF-Generierungsbeispiel dienen.

Schritt 1 Installieren Sie Node.js

Stellen Sie sicher, dass Sie Node.js auf Ihrem Computer installiert haben. Sie können die neueste Version von Node.js von der offiziellen Node.js-Website herunterladen.

Schritt 2 Installieren Sie create-react-app

create-react-app ist ein weit verbreitetes CLI-Tool zur Erstellung von React-Anwendungen. Installieren Sie es global mit folgendem Befehl:

npm install -g create-react-app

npm install -g create-react-app

SHELL

Schritt 3 Erstellen Sie eine neue React-Anwendung

Jetzt, da Sie create-react-app installiert haben, können Sie eine neue React-Anwendung mit folgendem Befehl erstellen:

create-react-app my-pdf-app

create-react-app my-pdf-app

SHELL

Dieser Befehl generiert eine neue React-Anwendung in einem Ordner namens my-pdf-app. Wechseln Sie in das neu erstellte Verzeichnis:

cd my-pdf-app

cd my-pdf-app

SHELL

Schritt 4 Starten Sie den Entwicklungsserver

Um den Entwicklungsserver zu starten und Ihre neue React-Anwendung in Aktion zu sehen, führen Sie den folgenden Befehl aus:

npm start

npm start

SHELL

Schritt 5 Implementierung der PDF-Generierung

Jetzt, da Sie eine React-Anwendung eingerichtet haben, können Sie den in den vorherigen Abschnitten dieses Artikels beschriebenen Schritten folgen, um die Umwandlung von HTML in PDF in React mit beliebten Bibliotheken wie React-pdf zu implementieren.

Einführung in die React-pdf Bibliothek

React-pdf ist eine beliebte Bibliothek, die speziell für React-Anwendungen entwickelt wurde und eine nahtlose Integration mit dem React-Ökosystem bietet. Zu den wichtigsten Merkmalen gehören die Unterstützung von Inline- und externen CSS, mehrseitige PDF-Generierung, erweitertes Styling und Kompatibilität mit serverseitigem Rendering (SSR).

PDF-Dateien mit React-pdf erstellen

In diesem Abschnitt konzentrieren wir uns auf die Verwendung von React-pdf zur Erstellung von PDF-Dateien in einer React-Anwendung. Um zu beginnen, müssen Sie das React-pdf-Paket installieren:

npm install --save @react-pdf/renderer

npm install --save @react-pdf/renderer

SHELL

Sobald es installiert ist, können Sie eine neue React-Komponente erstellen, um die Struktur Ihres PDF-Dokuments zu definieren:

import React from 'react';
import {
  Document,
  Page,
  Text,
  View,
  StyleSheet
} from '@react-pdf/renderer';

// Sample invoice data
const invoiceData = {
  sender: {
    name: "John Doe",
    address: "123 Main Street",
    city: "New York",
    state: "NY",
    zip: "10001",
  },
  recipient: {
    name: "Jane Smith",
    address: "456 Elm Street",
    city: "San Francisco",
    state: "CA",
    zip: "94107",
  },
  items: [
    { description: "Item 1", quantity: 2, unitPrice: 10 },
    { description: "Item 2", quantity: 3, unitPrice: 15 },
    { description: "Item 3", quantity: 1, unitPrice: 20 },
  ],
  invoiceNumber: "INV-123456",
  date: "April 26, 2023",
};

// Define styles for PDF document
const styles = StyleSheet.create({
  page: {
    backgroundColor: "#FFF",
    padding: 30,
  },
  header: {
    fontSize: 24,
    textAlign: "center",
    marginBottom: 30,
  },
  sender: {
    marginBottom: 20,
  },
  recipient: {
    marginBottom: 30,
  },
  addressLine: {
    fontSize: 12,
    marginBottom: 2,
  },
  itemsTable: {
    display: "table",
    width: "100%",
    borderStyle: "solid",
    borderWidth: 1,
    borderRightWidth: 0,
    borderBottomWidth: 0,
  },
  tableRow: {
    margin: "auto",
    flexDirection: "row",
  },
  tableColHeader: {
    width: "25%",
    borderStyle: "solid",
    borderWidth: 1,
    borderLeftWidth: 0,
    borderTopWidth: 0,
    backgroundColor: "#F0F0F0",
  },
  tableCol: {
    width: "25%",
    borderStyle: "solid",
    borderWidth: 1,
    borderLeftWidth: 0,
    borderTopWidth: 0,
  },
  tableCell: {
    fontSize: 12,
    textAlign: "center",
    padding: 5,
  },
  total: {
    marginTop: 20,
    textAlign: "right",
  },
  totalLabel: {
    fontSize: 14,
    fontWeight: "bold",
  },
  totalValue: {
    fontSize: 14,
  },
});

const InvoiceDocument = () => {
  // Calculate total amount
  const totalAmount = invoiceData.items.reduce(
    (total, item) => total + item.quantity * item.unitPrice,
    0
  );

  return (
    <Document>
      <Page style={styles.page}>
        <Text style={styles.header}>Invoice</Text>
        <View style={styles.sender}>
          <Text>{invoiceData.sender.name}</Text>
          <Text>{invoiceData.sender.address}</Text>
          <Text>
            {invoiceData.sender.city}, {invoiceData.sender.state} {invoiceData.sender.zip}
          </Text>
        </View>
        <View style={styles.recipient}>
          <Text>{invoiceData.recipient.name}</Text>
          <Text>{invoiceData.recipient.address}</Text>
          <Text>
            {invoiceData.recipient.city}, {invoiceData.recipient.state} {invoiceData.recipient.zip}
          </Text>
        </View>
        <View style={styles.itemsTable}>
          <View style={styles.tableRow}>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Description</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Quantity</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Unit Price</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Amount</Text>
          </View>
          {invoiceData.items.map((item, index) => (
            <View key={index} style={styles.tableRow}>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.description}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.quantity}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.unitPrice.toFixed(2)}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>
                {(item.quantity * item.unitPrice).toFixed(2)}
              </Text>
            </View>
          ))}
        </View>
        <View style={styles.total}>
          <Text style={styles.totalLabel}>Total: ${totalAmount.toFixed(2)}</Text>
        </View>
      </Page>
    </Document>
  );
};

export default InvoiceDocument;

import React from 'react';
import {
  Document,
  Page,
  Text,
  View,
  StyleSheet
} from '@react-pdf/renderer';

// Sample invoice data
const invoiceData = {
  sender: {
    name: "John Doe",
    address: "123 Main Street",
    city: "New York",
    state: "NY",
    zip: "10001",
  },
  recipient: {
    name: "Jane Smith",
    address: "456 Elm Street",
    city: "San Francisco",
    state: "CA",
    zip: "94107",
  },
  items: [
    { description: "Item 1", quantity: 2, unitPrice: 10 },
    { description: "Item 2", quantity: 3, unitPrice: 15 },
    { description: "Item 3", quantity: 1, unitPrice: 20 },
  ],
  invoiceNumber: "INV-123456",
  date: "April 26, 2023",
};

// Define styles for PDF document
const styles = StyleSheet.create({
  page: {
    backgroundColor: "#FFF",
    padding: 30,
  },
  header: {
    fontSize: 24,
    textAlign: "center",
    marginBottom: 30,
  },
  sender: {
    marginBottom: 20,
  },
  recipient: {
    marginBottom: 30,
  },
  addressLine: {
    fontSize: 12,
    marginBottom: 2,
  },
  itemsTable: {
    display: "table",
    width: "100%",
    borderStyle: "solid",
    borderWidth: 1,
    borderRightWidth: 0,
    borderBottomWidth: 0,
  },
  tableRow: {
    margin: "auto",
    flexDirection: "row",
  },
  tableColHeader: {
    width: "25%",
    borderStyle: "solid",
    borderWidth: 1,
    borderLeftWidth: 0,
    borderTopWidth: 0,
    backgroundColor: "#F0F0F0",
  },
  tableCol: {
    width: "25%",
    borderStyle: "solid",
    borderWidth: 1,
    borderLeftWidth: 0,
    borderTopWidth: 0,
  },
  tableCell: {
    fontSize: 12,
    textAlign: "center",
    padding: 5,
  },
  total: {
    marginTop: 20,
    textAlign: "right",
  },
  totalLabel: {
    fontSize: 14,
    fontWeight: "bold",
  },
  totalValue: {
    fontSize: 14,
  },
});

const InvoiceDocument = () => {
  // Calculate total amount
  const totalAmount = invoiceData.items.reduce(
    (total, item) => total + item.quantity * item.unitPrice,
    0
  );

  return (
    <Document>
      <Page style={styles.page}>
        <Text style={styles.header}>Invoice</Text>
        <View style={styles.sender}>
          <Text>{invoiceData.sender.name}</Text>
          <Text>{invoiceData.sender.address}</Text>
          <Text>
            {invoiceData.sender.city}, {invoiceData.sender.state} {invoiceData.sender.zip}
          </Text>
        </View>
        <View style={styles.recipient}>
          <Text>{invoiceData.recipient.name}</Text>
          <Text>{invoiceData.recipient.address}</Text>
          <Text>
            {invoiceData.recipient.city}, {invoiceData.recipient.state} {invoiceData.recipient.zip}
          </Text>
        </View>
        <View style={styles.itemsTable}>
          <View style={styles.tableRow}>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Description</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Quantity</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Unit Price</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Amount</Text>
          </View>
          {invoiceData.items.map((item, index) => (
            <View key={index} style={styles.tableRow}>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.description}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.quantity}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.unitPrice.toFixed(2)}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>
                {(item.quantity * item.unitPrice).toFixed(2)}
              </Text>
            </View>
          ))}
        </View>
        <View style={styles.total}>
          <Text style={styles.totalLabel}>Total: ${totalAmount.toFixed(2)}</Text>
        </View>
      </Page>
    </Document>
  );
};

export default InvoiceDocument;

JAVASCRIPT

Jetzt können Sie die PDFDownloadLink-Komponente von React-pdf verwenden, um die generierte PDF-Datei herunterzuladen:

import React from 'react';
import { PDFDownloadLink } from '@react-pdf/renderer';
import InvoiceDocument from './InvoiceDocument';
import './App.css';

const App = () => (
  <div className="app-container">
    <PDFDownloadLink
      document={<InvoiceDocument />}
      fileName="invoice.pdf"
      className="download-button"
    >
      {({ loading }) =>
        loading ? 'Loading document...' : 'Download Invoice'
      }
    </PDFDownloadLink>
  </div>
);

export default App;

import React from 'react';
import { PDFDownloadLink } from '@react-pdf/renderer';
import InvoiceDocument from './InvoiceDocument';
import './App.css';

const App = () => (
  <div className="app-container">
    <PDFDownloadLink
      document={<InvoiceDocument />}
      fileName="invoice.pdf"
      className="download-button"
    >
      {({ loading }) =>
        loading ? 'Loading document...' : 'Download Invoice'
      }
    </PDFDownloadLink>
  </div>
);

export default App;

JAVASCRIPT

Fügen Sie nun einige CSS-Stile in App.css für eine benutzerdefinierte Benutzeroberfläche hinzu:

.app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #d1e8ff;
}

.download-button {
  display: inline-block;
  background-color: #5a8fd5;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.download-button:hover {
  background-color: #3a68b7;
}

Öffnen Sie localhost:3000 in Ihrem Browser. Wenn Sie auf die Schaltfläche "Download" klicken, wird die PDF-Datei heruntergeladen.

Ihre PDF-Dateien gestalten

Die React-pdf Bibliothek unterstützt eine breite Palette von Styling-Optionen, ähnlich wie CSS. Hier sind einige häufige Styling-Eigenschaften, die Sie verwenden können, um das Erscheinungsbild Ihrer PDF-Dateien anzupassen:

color: Legt die Textfarbe fest.
fontSize: Legt die Schriftgröße des Textes fest.
fontFamily: Legt die Schriftfamilie des Textes fest.
textAlign: Legt die Textausrichtung fest (z.B. 'left', 'right', 'center' oder 'justify').
margin: Legt den Rand um ein Element fest.
padding: Legt den Innenabstand innerhalb eines Elements fest.
border: Legt den Rahmen um ein Element fest.
backgroundColor: Legt die Hintergrundfarbe eines Elements fest.

Alternative PDF-Bibliothek für React-Entwickler

IronPDF für Node.js ist eine ausgezeichnete Alternative zum Umwandeln von HTML in PDF in React. Entwickelt von Iron Software, ist es eine leistungsstarke Bibliothek, die es Entwicklern ermöglicht, PDF-Dokumente direkt aus ihren Node.js-Anwendungen zu erzeugen und zu bearbeiten. Ein herausragendes Merkmal ist die Fähigkeit, JavaScript-Ausführungen innerhalb von HTML-Inhalten während der PDF-Generierung zu handhaben, was die Erstellung dynamischer und interaktiver PDFs ermöglicht.

Mit Unterstützung für verschiedene Plattformen, einschließlich Windows, MacOS, Linux, Docker und Cloud-Plattformen wie Azure und AWS, sorgt IronPDF für plattformübergreifende Kompatibilität. Sein benutzerfreundliches API ermöglicht es Entwicklern, die PDF-Erzeugung und -Manipulation schnell in ihre Node.js-Projekte zu integrieren.

React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, und da IronPDF für Node.js entwickelt wurde, können Sie IronPDF in Ihre React-Anwendungen integrieren, indem Sie seine Node.js API nutzen.

Hier ist ein Überblick darüber, wie Sie IronPDF mit React verwenden können:

Installieren Sie IronPDF: Sie können IronPDF in Ihrem React-Projekt mit npm oder yarn installieren.

npm install @ironsoftware/ironpdf

npm install @ironsoftware/ironpdf

SHELL

Integration mit React-Komponenten: Sie können React-Komponenten erstellen, die IronPDF zum Generieren und Bearbeiten von PDFs verwenden. Beispielsweise können Sie eine Komponente haben, die HTML-Inhalte als Eingabe nimmt und mit der IronPDF API in ein PDF umwandelt.

import React from 'react';
import { PdfDocument } from '@ironsoftware/ironpdf';

const HTMLToPDFComponent = () => {
    const convertHTMLToPDF = async (htmlContent) => {
        try {
            const pdf = await PdfDocument.fromHtml(htmlContent);
            await pdf.saveAs('generated_pdf.pdf');
            alert('PDF generated successfully!');
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };

    return (
        <div>
            {/* Input HTML content */}
            <textarea onChange={(e) => convertHTMLToPDF(e.target.value)} />
        </div>
    );
};

export default HTMLToPDFComponent;

import React from 'react';
import { PdfDocument } from '@ironsoftware/ironpdf';

const HTMLToPDFComponent = () => {
    const convertHTMLToPDF = async (htmlContent) => {
        try {
            const pdf = await PdfDocument.fromHtml(htmlContent);
            await pdf.saveAs('generated_pdf.pdf');
            alert('PDF generated successfully!');
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };

    return (
        <div>
            {/* Input HTML content */}
            <textarea onChange={(e) => convertHTMLToPDF(e.target.value)} />
        </div>
    );
};

export default HTMLToPDFComponent;

JAVASCRIPT

PDF-Generierung handhaben: Verwenden Sie die Funktionen von IronPDF innerhalb Ihrer React-Komponenten, um PDF-Generierung, Bearbeitung und Speicherung zu handhaben. You can use IronPDF's methods for converting HTML strings, URLs, or images to PDFs.
PDFs rendern: Nachdem Sie PDFs mit IronPDF generiert haben, können Sie sie in Ihrer React-Anwendung mit geeigneten Komponenten oder Bibliotheken zum Anzeigen von PDF-Dokumenten rendern.

import React from 'react';

const PDFViewerComponent = () => {
    return (
        <div>
            {/* Render PDF using appropriate component or library */}
            <iframe src="generated_pdf.pdf" width="100%" height="600px" title="PDF Viewer" />
        </div>
    );
};

export default PDFViewerComponent;

import React from 'react';

const PDFViewerComponent = () => {
    return (
        <div>
            {/* Render PDF using appropriate component or library */}
            <iframe src="generated_pdf.pdf" width="100%" height="600px" title="PDF Viewer" />
        </div>
    );
};

export default PDFViewerComponent;

JAVASCRIPT

Mit IronPDF können Entwickler effizient PDF-Dokumente in professioneller Qualität aus verschiedenen Quellen generieren, sie an ihre spezifischen Anforderungen anpassen und PDF-Generierungsfunktionen nahtlos in ihre .NET-Anwendungen integrieren. IronPDF unterstützt auch erweiterte Funktionen wie CSS, JavaScript und benutzerdefinierte Schriftarten, die sicherstellen, dass Ihre generierten PDF-Dateien das Design und die Anforderungen Ihrer Anwendung erfüllen.

Abschluss

In diesem Artikel haben wir den Prozess der Umwandlung von HTML in PDF in React mit der React-pdf-Bibliothek behandelt. Wir haben beliebte Bibliotheken zur PDF-Erzeugung, wie man PDF-Dateien mit React-pdf erstellt und gestaltet und zusätzliche Optionen zur Erzeugung komplexerer PDF-Dokumente diskutiert.

Durch das Befolgen dieser Anleitung sollten Sie nun ein solides Verständnis davon haben, wie man PDF-Dateien in Ihren React-Anwendungen generiert, sodass Sie hochwertige PDFs generieren und die Bedürfnisse verschiedener Anwendungsfälle erfüllen können.

IronPDF bietet eine kostenlose Testversion, die es Ihnen ermöglicht, die Bibliothek zu testen und zu bestimmen, ob sie Ihren Bedürfnissen entspricht, bevor Sie sich zum Kauf verpflichten. Nach der Testphase beginnen die IronPDF Kauflizenzen bei $799, die Prioritätssupport und Updates umfasst. Additionally, IronPDF is available for other languages like C# .NET, Java, and Python. Laden Sie die IronPDF-Bibliothek herunter, indem Sie mit IronPDF für Node.js beginnen und probieren Sie es aus.

Darrius Serrant

Jetzt mit dem Ingenieurteam chatten

Full-Stack-Software-Ingenieur (WebOps)

Darrius Serrant hat einen Bachelor-Abschluss in Informatik von der University of Miami und arbeitet als Full-Stack-WebOps-Marketing-Ingenieur bei Iron Software. Seit seiner Jugend vom Programmieren angezogen, sah er die Informatik als sowohl mysteriös als auch zugänglich, was es zum perfekten Medium für Kreativität und Problemlösung ...