PDF-WERKZEUGE

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

Veröffentlicht 16. Mai 2023

Teilen Sie:

Die Konvertierung von HTML in PDF in React ist zu einer wichtigen Funktion für viele Webanwendungen geworden. Ganz gleich, ob Sie ein Fakturierungssystem oder einen Berichtsgenerator entwickeln oder einfach nur Informationen in einem allgemein akzeptierten Format weitergeben möchten, die PDF-Erstellung ist von entscheidender Bedeutung. In diesem Artikel erfahren Sie, wie Sie PDF-Dateien in Ihrer React-Anwendung erstellen und gestalten können, indem Sie HTML in PDF konvertieren und dabei beliebte Bibliotheken verwenden.

Wie man HTML in React in PDF konvertiert

Erstellen und Konfigurieren eines React-Projekts
Laden Sie die Bibliothek zur Konvertierung von HTML in PDF in React mit npm herunter
Importieren Sie die notwendigen Module aus React-pdf/renderer
Konfigurieren Sie die HTML-Seite mit den importierten Modulen
Nutzen Sie die PDFDownloadLink modul von React-pdf zur Konvertierung von HTML in PDF

Beliebte Bibliotheken für die PDF-Erstellung

Bevor wir in den Prozess der Konvertierung von HTML in PDF eintauchen, lassen Sie uns einige populäre Bibliotheken besprechen, 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. Es unterstützt verschiedene Styling-Optionen und kann mühelos komplexe, mehrseitige PDFs erstellen.
jsPDF: Eine weit verbreitete JavaScript-Bibliothek, die PDF-Dateien im Handumdrehen erzeugt. Es bietet eine breite Palette von Funktionen, einschließlich Textgestaltung, Bildeinbettung und mehr.
html2canvas: Mit dieser Bibliothek können Sie einen Screenshot eines HTML-Elements aufnehmen und in ein Canvas-Objekt umwandeln, das dann mit anderen Bibliotheken wie jsPDF in ein PDF-Dokument umgewandelt werden kann.

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

Vertrautheit mit React und seinem Ökosystem

Bevor man sich mit der Konvertierung von HTML in PDF befasst, ist es wichtig, ein solides Verständnis von React zu haben. Dazu gehören Kenntnisse über JSX, Zustandsverwaltung, Komponentenlebenszyklen und Hooks.

Kenntnisse in HTML, CSS und JavaScript

Eine solide Grundlage in HTML, CSS und JavaScript ist für die Arbeit mit der React-pdf-Bibliothek unerlässlich. Dazu gehören Kenntnisse über HTML-Elemente und -Attribute, CSS-Styling und -Selektoren sowie JavaScript-Grundlagen wie Variablen, Funktionen und Schleifen.

Erste Schritte mit einer React-Anwendung

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

Schritt 1 Node.js installieren

Stellen Sie sicher, dass Node.js auf Ihrem Rechner installiert ist. Sie können die neueste Version von Node.js von der Website offizielle Website.

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

Wie man HTML in React in PDF konvertiert (Entwickler-Tutorial): Abbildung 1 - React-App erstellen

Schritt 3 Erstellen einer neuen React-Anwendung

Nachdem Sie create-react-app installiert haben, können Sie mit dem folgenden Befehl eine neue React-Anwendung erstellen:

create-react-app my-pdf-app

Wie man HTML in React in PDF konvertiert (Entwickler-Tutorial): Abbildung 2 - Erstellen einer neuen React-Anwendung

Mit diesem Befehl wird eine neue React-Anwendung in einem Ordner namens meine-pdf-app erstellt. Wechseln Sie in das neu erstellte Verzeichnis:

cd my-pdf-app

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

Wie man HTML in React in PDF konvertiert (Entwickler-Tutorial): Abbildung 3 - Live-React-Anwendung, die auf localhost läuft

Schritt 5 Implementierung der PDF-Erzeugung

Nun, da Sie eine React-Anwendung eingerichtet haben, können Sie die in den vorherigen Abschnitten dieses Artikels beschriebenen Schritte befolgen, um die HTML-zu-PDF-Konvertierung mit React unter Verwendung beliebter 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 in das React-Ökosystem bietet. Zu den wichtigsten Funktionen gehören die Unterstützung von Inline- und externem CSS, die Generierung mehrseitiger PDF-Dateien, fortschrittliches Styling und Kompatibilität mit serverseitigem Rendering (SSR).

PDF-Dateien mit React-pdf erstellen

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

npm install --save @React-pdf/renderer

Wie man HTML in React in PDF umwandelt (Entwickler-Tutorial): Abbildung 4 - React-pdf-Paket

Nach der Installation 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,
      Image,
      Font,
    } from "@React-pdf/renderer";
    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",
    };
    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 = () => {
      const totalAmount = invoiceData.items.reduce(
        (total, item) => total + item.quantity * item.unitPrice,
        0
      );

      return (

            Invoice

              {invoiceData.sender.name}
              {invoiceData.sender.address}

                {invoiceData.sender.city}, {invoiceData.sender.state}{" "}
                {invoiceData.sender.zip}

              {invoiceData.recipient.name}

                {invoiceData.recipient.address}

                {invoiceData.recipient.city}, {invoiceData.recipient.state}{" "}
                {invoiceData.recipient.zip}

                  Description

                  Quantity

                  Unit Price

                  Amount

              {invoiceData.items.map((item, index) => (

                    {item.description}

                    {item.quantity}

                      {item.unitPrice.toFixed(2)}

                      {(item.quantity * item.unitPrice).toFixed(2)}

              ))}

              Total:
              ${totalAmount.toFixed(2)}

      );
    };

    export default InvoiceDocument;

    import React from "react";
    import {
      Document,
      Page,
      Text,
      View,
      StyleSheet,
      Image,
      Font,
    } from "@React-pdf/renderer";
    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",
    };
    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 = () => {
      const totalAmount = invoiceData.items.reduce(
        (total, item) => total + item.quantity * item.unitPrice,
        0
      );

      return (

            Invoice

              {invoiceData.sender.name}
              {invoiceData.sender.address}

                {invoiceData.sender.city}, {invoiceData.sender.state}{" "}
                {invoiceData.sender.zip}

              {invoiceData.recipient.name}

                {invoiceData.recipient.address}

                {invoiceData.recipient.city}, {invoiceData.recipient.state}{" "}
                {invoiceData.recipient.zip}

                  Description

                  Quantity

                  Unit Price

                  Amount

              {invoiceData.items.map((item, index) => (

                    {item.description}

                    {item.quantity}

                      {item.unitPrice.toFixed(2)}

                      {(item.quantity * item.unitPrice).toFixed(2)}

              ))}

              Total:
              ${totalAmount.toFixed(2)}

      );
    };

    export default InvoiceDocument;

JAVASCRIPT

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

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

    const App = () => (

          {({ blob, url, loading, error }) =>
            loading ? 'Loading document...' : 'Download Invoice'
          }

    );

    export default App;

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

    const App = () => (

          {({ blob, url, loading, error }) =>
            loading ? 'Loading document...' : 'Download Invoice'
          }

    );

    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.

Wie man HTML in React in PDF konvertiert (Entwickler-Tutorial): Abbildung 5 - React PDF läuft auf localhost

Wenn Sie auf die Schaltfläche Download klicken, wird die PDF-Datei heruntergeladen.

Wie man HTML in React in PDF konvertiert (Entwickler-Tutorial): Abbildung 6 - Heruntergeladene Rechnung

Hier ist die Ausgabe der PDF-Datei aus dem HTML-Dokument:

Wie man HTML in React in PDF konvertiert (Entwickler-Tutorial): Abbildung 7 - Dokumentausgabe

Gestalten Sie Ihre PDF-Dateien

Die Bibliothek React-pdf unterstützt eine breite Palette von Styling-Optionen, ähnlich wie CSS. Im Folgenden finden Sie einige gängige Styling-Eigenschaften, mit denen Sie das Erscheinungsbild Ihrer PDF-Dateien anpassen können:

Farbe: Legt die Textfarbe fest.
FontSize: Legt die Schriftgröße des Textes fest.
FontFamily: Legt die Schriftfamilie des Textes fest.
TextAusrichtung: Legt die Textausrichtung fest (z.B. 'links', 'rechts', 'zentrieren' oder 'ausrichten').
margin: Legt den Rand um ein Element fest.
Polsterung: Legt das Padding 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 for Node.js ist eine hervorragende Alternative für die Konvertierung von HTML in PDF in React. Die von IronSoftware entwickelte Bibliothek ermöglicht es Entwicklern, PDF-Dokumente direkt aus ihren Node.js-Anwendungen zu erzeugen und zu bearbeiten. Eine der herausragenden Eigenschaften von IronPDF ist die Fähigkeit, während der PDF-Generierung JavaScript innerhalb von HTML-Inhalten auszuführen, was eine dynamische und interaktive PDF-Erstellung ermöglicht.

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.

React ist eine JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen. Da IronPDF für Node.js entwickelt wurde, können Sie IronPDF in Ihre React-Anwendungen integrieren, indem Sie die 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

Integration mit React-Komponenten: Sie können React-Komponenten erstellen, die IronPDF zur Erzeugung und Bearbeitung von PDFs nutzen. Sie können z. B. eine Komponente haben, die HTML-Inhalte als Input nimmt und sie mit Hilfe der API von IronPDF in ein PDF konvertiert.

  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-Erzeugung handhaben: Nutzen Sie die Funktionalität von IronPDF in Ihren React-Komponenten, um die PDF-Erzeugung, -Bearbeitung und -Speicherung zu steuern. Sie können die IronPDF-Methoden zur Konvertierung verwenden HTML-Zeichenfolgen, URLs, oder bilder zu PDFs.
Rendering von PDFs: Sobald Sie PDFs mit IronPDF generiert haben, können Sie sie in Ihrer React-Anwendung mit geeigneten Komponenten oder Bibliotheken zur Anzeige 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 auf effiziente Weise professionelle PDF-Dokumente aus verschiedenen Quellen generieren, sie an ihre spezifischen Anforderungen anpassen und PDF-Generierungsfunktionen nahtlos in ihre .NET-Anwendungen integrieren. IronPDF unterstützt auch fortgeschrittene Funktionen wie CSS, JavaScript und benutzerdefinierte Schriftarten, um sicherzustellen, dass die generierten PDF-Dateien dem Design und den Anforderungen Ihrer Anwendung entsprechen.

Schlussfolgerung

In diesem Artikel haben wir den Prozess der Konvertierung von HTML in PDF in React mit Hilfe der React-pdf Bibliothek behandelt. Wir haben beliebte Bibliotheken für die PDF-Erzeugung besprochen, wie man PDF-Dateien mit React-pdf erstellt und gestaltet, und zusätzliche Optionen für die Erzeugung komplexerer PDF-Dokumente.

Wenn Sie diesen Leitfaden befolgen, sollten Sie nun ein solides Verständnis dafür haben, wie Sie PDF-Dateien in Ihren React-Anwendungen generieren können, so dass Sie qualitativ hochwertige PDFs erzeugen und die Anforderungen verschiedener Anwendungsfälle erfüllen können.

IronPDF bietet eine kostenloser Testso können Sie die Bibliothek testen und feststellen, ob sie Ihren Anforderungen entspricht, bevor Sie sich zum Kauf verpflichten. Nach Ablauf der Testphase kann IronPDF lizenzen ab $749, die vorrangigen Support und Updates beinhaltet. Zusätzlich ist es auch für andere Sprachen verfügbar wie C# .NET, Java und Python. Laden Sie die Bibliothek herunter von hier und probieren Sie es aus.

< PREVIOUS
PDF-Datei in JavaScript drucken