PDF-WERKZEUGE

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

Kannapat Udonpant

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 Sie ein React-Projekt
Laden Sie die Bibliothek herunter, um HTML in PDF in React mit npm zu konvertieren
Importieren Sie die notwendigen Module aus React-pdf/renderer
Konfigurieren Sie die HTML-Seite mit den importierten Modulen
Nutzen Sie das PDFDownloadLink-Modul von React-pdf, um das HTML in PDF zu konvertieren

Beliebte Bibliotheken für die PDF-Erstellung

Bevor wir in den Prozess der Umwandlung von HTML zu PDF eintauchen, lassen Sie uns einige beliebte Bibliotheken besprechen, die Sie für die PDF-Erstellung 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 zur dynamischen Erstellung von PDF-Dateien. Es bietet eine breite Palette von Funktionen, einschließlich Textgestaltung, Bildeinbettung und mehr.
html2canvas: Diese Bibliothek ermöglicht es Ihnen, einen Screenshot eines HTML-Elements aufzunehmen und in ein Canvas-Objekt zu konvertieren, das dann mithilfe anderer Bibliotheken wie jsPDF in eine PDF-Datei 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 Umwandlung von HTML in PDF in React fortfahren, lassen Sie uns schnell durchgehen, wie Sie eine neue React-Anwendung mit dem beliebten create-react-app CLI-Tool erstellen. 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 offiziellen Node.js-Website herunterladen.

Schritt 2 Installieren Sie create-react-app

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

npm install -g create-react-app

So konvertieren Sie HTML in PDF in React (Entwickler-Tutorial): Abbildung 1 - React-App erstellen

Schritt 3 Erstellen einer neuen React-Anwendung

Nun, da 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 PDF in React konvertiert (Entwickler-Tutorial): Abbildung 2 - Erstellen einer neuen React-App

Dieser Befehl wird eine neue React-Anwendung in einem Ordner namens my-pdf-app erzeugen. 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 zu PDF in React konvertiert (Entwickler-Tutorial): Abbildung 3 - Live React App, die auf localhost läuft

Schritt 5 Implementierung der PDF-Erzeugung

Da Sie nun eine React-Anwendung eingerichtet haben, können Sie die in den vorherigen Abschnitten dieses Artikels beschriebenen Schritte befolgen, um die HTML-zu-PDF-React-Konvertierung 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 in das React-Ökosystem bietet. Einige der Hauptmerkmale umfassen die Unterstützung für Inline- und externe CSS, die Erstellung von PDFs mit mehreren Seiten, erweiterte Gestaltungsmöglichkeiten und die Kompatibilität mit serverseitigem Rendering (SSR).

PDF-Dateien mit React-pdf erstellen

In diesem Abschnitt konzentrieren wir uns darauf, React-pdf zu verwenden, um PDF-Dateien in einer React-Anwendung zu erstellen. Um zu beginnen, müssen Sie das React-pdf-Paket installieren:

npm install --save @React-pdf/renderer

Wie man HTML in PDF in React 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 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 = () => (

          {({ 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-Styles 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.

So konvertieren Sie HTML in PDF in React (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 PDF in React konvertiert (Entwickler-Tutorial): Abbildung 6 - Heruntergeladene Rechnung

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

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

Gestalten Sie Ihre PDF-Dateien

Die React-pdf-Bibliothek 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:

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 Abstand um ein Element fest.
padding: Legt den Innenabstand 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. Entwickelt von Iron Software, ist es eine leistungsstarke Bibliothek, die Entwicklern ermöglicht, PDF-Dokumente direkt aus ihren Node.js-Anwendungen zu erstellen 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 Methoden von IronPDF verwenden, um HTML-Strings, URLs oder Bilder in PDFs zu konvertieren.
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 Umwandlung von HTML in PDF in React mithilfe der React-pdf-Bibliothek behandelt. Wir haben beliebte Bibliotheken für die PDF-Erstellung besprochen, wie man PDF-Dateien mit React-pdf erstellt und gestaltet, sowie zusätzliche Optionen für die Erstellung 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 kostenlose Testversion an, mit der Sie die Bibliothek testen und feststellen können, ob sie Ihren Anforderungen entspricht, bevor Sie sich zum Kauf entschließen. Nach der Testphase beginnen die Kauflizenzen von IronPDF bei $749, und beinhalten vorrangigen Support und Updates. Zusätzlich ist IronPDF für andere Sprachen wie C# .NET, Java und Python verfügbar. Laden Sie die IronPDF-Bibliothek herunter, indem Sie mit IronPDF for Node.js beginnen und probieren Sie es aus.

Kannapat Udonpant

Jetzt mit dem Ingenieurteam chatten

Software-Ingenieur

Bevor er Software-Ingenieur wurde, promovierte Kannapat an der Universität Hokkaido in Japan im Bereich Umweltressourcen. Während seines Studiums wurde Kannapat auch Mitglied des Vehicle Robotics Laboratory, das Teil der Abteilung für Bioproduktionstechnik ist. Im Jahr 2022 wechselte er mit seinen C#-Kenntnissen zum Engineering-Team von Iron Software, wo er sich auf IronPDF konzentriert. Kannapat schätzt an seiner Arbeit, dass er direkt von dem Entwickler lernt, der den Großteil des in IronPDF verwendeten Codes schreibt. Neben dem kollegialen Lernen genießt Kannapat auch den sozialen Aspekt der Arbeit bei Iron Software. Wenn er nicht gerade Code oder Dokumentationen schreibt, kann man Kannapat normalerweise beim Spielen auf seiner PS5 oder beim Wiedersehen mit The Last of Us antreffen.

< PREVIOUS
PDF-Datei in JavaScript drucken