suchen

Heim >Web-Frontend >js-Tutorial >Verwenden Sie Puppeteer mit Node, um PDFs zu erstellen!

Verwenden Sie Puppeteer mit Node, um PDFs zu erstellen!

Patricia Arquette
Patricia ArquetteOriginal
2024-12-27 12:25:17648Durchsuche

So erstellen Sie einen PDF-Generator mit Puppeteer und Node.js

Use puppeteer with Node to create PDFs!

Das Generieren dynamischer PDFs ist eine häufige Anforderung in der Webentwicklung. Ob für Rechnungen, Berichte oder Lebensläufe – die Erstellung eines robusten PDF-Generators ist eine wesentliche Fähigkeit für Entwickler. In diesem Artikel führe ich Sie durch die Erstellung eines PDF-Generators mit Node.js und Puppeteer, einer leistungsstarken Headless-Browser-Bibliothek.

Zum Beispiel habe ich dieselbe Methode verwendet, um mein CV Maker-Projekt zu erstellen, das Benutzereingaben entgegennimmt und dynamisch eine PDF-Datei generiert. Die Live-Demo des Projekts können Sie hier sehen: Live-Demo.

Dieser Leitfaden ist in einer einfachen, anfängerfreundlichen Sprache verfasst. Wenn Ihnen ein Teil unklar erscheint, können Sie gerne einen Kommentar hinterlassen, und ich werde mich so schnell wie möglich darum kümmern.

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Sie Folgendes haben:

  • Node.js auf Ihrem Computer installiert.
  • Ein grundlegendes Node.js-Projektskelett eingerichtet.
  • Puppeteer ist als Abhängigkeit in Ihrem Projekt installiert: 
  npm install puppeteer

Wenn Sie auf den vollständigen Quellcode für dieses Tutorial verweisen möchten, sehen Sie sich mein GitHub-Repository an.

Schritt 1: Erstellen Sie einen POST-Endpunkt zum Empfangen von Daten

Erstellen Sie zunächst einen Endpunkt, an den der Client Daten senden kann, um ein PDF zu generieren. Dazu definieren wir eine einfache POST-Route in unserer index.js (oder einer entsprechenden Hauptserverdatei).

app.post("/data", async (req: Request, res: Response) => {
    let postData = req.body.data; // Storing the data sent from the client
});

Dieser Endpunkt empfängt die Daten, die in das PDF aufgenommen werden müssen.

Schritt 2: Erstellen Sie eine Controller-Datei

Um den Code organisiert zu halten, erstellen Sie einen Ordner mit dem Namen „controllers“ in Ihrem Projektverzeichnis. Erstellen Sie in diesem Ordner eine Datei mit dem Namen PdfController.js.

In der Controller-Datei schreiben wir die Logik zum Generieren der PDF-Datei. Dies hält unseren Code modular und erleichtert die Wartung.

Schritt 3: Schreiben Sie eine Logik für die PDF-Generierung

Fügen Sie in PdfController.js den folgenden Code hinzu, um mit Puppeteer ein PDF zu generieren:

export default (async function (postData) {
    try {
        const browser = await puppeteer.launch({
            headless: true,
            args: ["--no-sandbox", "--disable-gpu"],
        });

        const page = await browser.newPage();
        const content = `<html><body><h1>${postData}</h1></body></html>`;

        await page.setContent(content);
        await page.emulateMediaType('screen');
        await page.pdf({
            path: 'resume.pdf',
            format: 'A4',
            printBackground: true,
        });

        console.log('PDF created');
        await browser.close();
    } catch (err) {
        console.error('Error:', err);
    }
});

Das macht dieser Code:

  1. Startet eine Puppeteer-Browserinstanz im Headless-Modus.
  2. Öffnet eine neue Seite und legt den Inhalt anhand der vom Benutzer bereitgestellten Daten fest.
  3. Konvertiert den Seiteninhalt in ein PDF und speichert es als summary.pdf.
  4. Schließt den Browser, um Ressourcen freizugeben.

Schritt 4: Verwenden Sie die PdfController-Funktion im POST-Endpunkt

Verbinden Sie nun die PdfController-Funktion mit dem POST-Endpunkt in index.js:

import PdfController from "./controllers/controller.js";

app.post("/data", async (req: Request, res: Response) => {
    let postData = req.body.data; // Storing the data sent from the client
    await PdfController(postData);
});

Dadurch wird sichergestellt, dass bei jedem Aufruf des /data-Endpunkts die Logik zum Generieren der PDF-Datei ausgeführt wird.

Schritt 5: Überprüfen Sie die PDF-Generierung

An dieser Stelle können Sie den Endpunkt mit Postman oder einem anderen HTTP-Client testen. Wenn Sie eine POST-Anfrage mit den relevanten Textdaten senden, wird im Stammverzeichnis des Projekts eine PDF-Datei mit dem Namen „resume.pdf“ erstellt.

Schritt 6: Senden Sie das PDF an den Kunden zurück

Um das generierte PDF als Antwort an den Client zurückzusenden, installieren Sie das fs-extra-Paket:

  npm install puppeteer

Dann aktualisieren Sie den POST-Endpunkt wie folgt:

app.post("/data", async (req: Request, res: Response) => {
    let postData = req.body.data; // Storing the data sent from the client
});

Dieser Code sendet die Datei „Lebenslauf.pdf“ als herunterladbaren Anhang an den Kunden.

Abschluss

Use puppeteer with Node to create PDFs!

Und das ist es! ? Sie haben mit Node.js und Puppeteer einen vollständigen PDF-Generator erstellt. Dieses Setup generiert dynamisch PDFs basierend auf Benutzereingaben und sendet sie als herunterladbare Dateien zurück.

Das haben Sie erreicht:

  • Richten Sie einen Node.js-Server mit einem POST-Endpunkt ein.
  • Hat Puppeteer verwendet, um PDFs dynamisch zu generieren.
  • Das generierte PDF wurde an den Kunden zurückgesendet.

Bonus

Wenn Sie gut strukturierte und formatierte PDFs generieren möchten (z. B. Lebensläufe oder Rechnungen mit Tabellen und Stilen), lassen Sie es mich in den Kommentaren wissen. Ich würde gerne ein weiteres Tutorial für fortgeschrittene Anwendungsfälle schreiben.

Schauen Sie sich auch gerne den vollständigen Projektcode an. Es ist gut dokumentiert und anfängerfreundlich.

Einen schönen Tag noch!

Das obige ist der detaillierte Inhalt vonVerwenden Sie Puppeteer mit Node, um PDFs zu erstellen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

postman define if for Directory using JS function this input github http Other
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie können reguläre Ausdrücke zur Validierung von Passwörtern mit erweiterten Sicherheitsregeln verwendet werden?Nächster Artikel：Wie können reguläre Ausdrücke zur Validierung von Passwörtern mit erweiterten Sicherheitsregeln verwendet werden?

In Verbindung stehende Artikel

Mehr sehen