Erstellen einer Next.js-API zum Konvertieren von HTML in PDF mit Puppeteer (Vercel-kompatibel)

Die Konvertierung von HTML in PDF ist eine häufige Anforderung in Webanwendungen. In diesem Blogbeitrag erfahren Sie, wie Sie mit Puppeteer eine Next.js-API-Route erstellen, die HTML in PDF konvertiert, und wir stellen sicher, dass sie bei der Bereitstellung in Vercel funktioniert.

Die Herausforderung

Während Puppeteer ein leistungsstarkes Tool für die Konvertierung von HTML in PDF ist, birgt es Herausforderungen bei der Bereitstellung in serverlosen Umgebungen wie Vercel. Die Hauptprobleme sind:

1. Puppeteer erfordert eine Chromium-Binärdatei, die die Größenbeschränkungen von Vercel überschreitet.
2. Serverlose Funktionen haben eine begrenzte Ausführungszeit und Ressourcen.

Die Lösung

Wir werden eine Kombination aus @sparticuz/chromium-min und puppeteer-core verwenden, um diese Einschränkungen zu überwinden. So gehen wir vor:

1. Verwenden Sie einen minimalen Chromium-Build, der für serverlose Umgebungen entwickelt wurde.
2. Konfigurieren Sie Puppeteer für die Verwendung dieser minimalen Chromium-Version.
3. Optimieren Sie den PDF-Generierungsprozess für die serverlose Ausführung.

Schritt 1: Einrichten des Projekts

Erstellen Sie zunächst ein neues Next.js-Projekt oder verwenden Sie ein vorhandenes. Installieren Sie dann die erforderlichen Abhängigkeiten:

npm install @sparticuz/chromium-min puppeteer-core

Um Kompatibilität und optimale Leistung zu gewährleisten, ist es wichtig, die richtigen Versionen der erforderlichen Pakete zu verwenden. Nach den letzten Tests werden die folgenden Versionen empfohlen:

{
  "dependencies": {
    "@sparticuz/chromium-min": "^129.0.0",
    "puppeteer-core": "^23.5.0"
  }
}

Schritt 2: Erstellen der API-Route

Erstellen Sie eine neue Datei unter app/api/html-to-pdf/route.js (für Next.js 13 App-Router) oder page/api/html-to-pdf.js (für Pages-Router). Hier ist der Code:

const chromium = require("@sparticuz/chromium-min");
const puppeteer = require("puppeteer-core");

async function getBrowser() {
  return puppeteer.launch({
    args: [...chromium.args, "--hide-scrollbars", "--disable-web-security"],
    defaultViewport: chromium.defaultViewport,
    executablePath: await chromium.executablePath(
      `https://github.com/Sparticuz/chromium/releases/download/v129.0.0/chromium-v129.0.0-pack.tar`
    ),
    headless: chromium.headless,
    ignoreHTTPSErrors: true
  });
}

export async function POST(request) {
  try {
    const { html } = await request.json();

    const browser = await getBrowser();
    const page = await browser.newPage();
    await page.setContent(html, { waitUntil: "networkidle0" });
    const pdfBuffer = await page.pdf({
      format: "A4",
      printBackground: true,
      margin: { top: "1cm", right: "1cm", bottom: "1cm", left: "1cm" }
    });
    await browser.close();

    return new Response(pdfBuffer, {
      headers: {
        "Content-Type": "application/pdf",
        "Content-Disposition": 'attachment; filename="output.pdf"'
      }
    });
  } catch (error) {
    console.error("Error generating PDF:", error);
    return new Response(JSON.stringify({ error: "Failed to generate PDF" }), {
      status: 500,
      headers: { "Content-Type": "application/json" }
    });
  }
}

Schritt 3: Den Code verstehen

Lassen Sie uns die wichtigsten Teile dieses Codes aufschlüsseln:

Browserkonfiguration

Die getBrowser-Funktion richtet Puppeteer mit der minimalen Chromium-Binärdatei ein:

async function getBrowser() {
  return puppeteer.launch({
    args: [...chromium.args, "--hide-scrollbars", "--disable-web-security"],
    defaultViewport: chromium.defaultViewport,
    executablePath: await chromium.executablePath(
      `https://github.com/Sparticuz/chromium/releases/download/v129.0.0/chromium-v129.0.0-pack.tar`
    ),
    headless: chromium.headless,
    ignoreHTTPSErrors: true
  });
}

Diese Konfiguration verwendet das Paket @sparticuz/chromium-min, um eine minimale Chromium-Binärdatei bereitzustellen, die mit serverlosen Umgebungen kompatibel ist.

PDF-Generierung

Die Hauptlogik für die PDF-Generierung liegt in der POST-Funktion:

1. Extrahieren Sie den HTML-Code aus dem Anforderungstext.
2. Starten Sie eine Browserinstanz mit der getBrowser-Funktion.
3. Erstellen Sie eine neue Seite und stellen Sie deren Inhalt auf den bereitgestellten HTML-Code ein.
4. Generieren Sie ein PDF aus dem Seiteninhalt.
5. Schließen Sie den Browser, um Ressourcen freizugeben.
6. Geben Sie das PDF als Antwort mit den entsprechenden Kopfzeilen zurück.

Schritt 4: Verwendung der API

Um diese API zu verwenden, senden Sie eine POST-Anfrage mit dem HTML-Inhalt im Anfragetext:

const response = await fetch('/api/html-to-pdf', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ html: '<h1 id="Hello-World">Hello, World!</h1>' }),
});

if (response.ok) {
  const blob = await response.blob();
  // Handle the PDF blob (e.g., download or display)
}

Überlegungen zur Bereitstellung

Beachten Sie bei der Bereitstellung in Vercel die folgenden Punkte:

1. Ausführungszeit: Vercel hat eine maximale Ausführungszeit von 10 Sekunden für Hobbypläne und 60 Sekunden für Profipläne. Optimieren Sie Ihren HTML- und PDF-Generierungsprozess, um diese Grenzen einzuhalten.

2. Speichernutzung: Achten Sie auf die Speichernutzung. Die minimale Chromium-Binärdatei hilft, aber komplexe PDFs beanspruchen möglicherweise immer noch viel Speicher.

3. Kaltstarts: Bei serverlosen Funktionen kann es zu Kaltstarts kommen. Der erste Aufruf ist möglicherweise langsamer, da die Chromium-Binärdatei heruntergeladen und eingerichtet werden muss.

4. Fehlerbehandlung: Implementieren Sie eine robuste Fehlerbehandlung, um Zeitüberschreitungen oder Ressourcenbeschränkungen zu verwalten.

5. Caching: Erwägen Sie die Implementierung von Caching-Strategien für häufig generierte PDFs, um die Belastung Ihrer serverlosen Funktionen zu reduzieren.

Abschluss

Mit diesem Ansatz können Sie mithilfe von Next.js und Puppeteer eine leistungsstarke HTML-zu-PDF-Konvertierungs-API erstellen, die mit der serverlosen Umgebung von Vercel kompatibel ist. Durch die Nutzung von @sparticuz/chromium-min und puppeteer-core meistern wir die größten Herausforderungen beim Betrieb von Puppeteer in einem serverlosen Kontext.

Das obige ist der detaillierte Inhalt vonErstellen einer Next.js-API zum Konvertieren von HTML in PDF mit Puppeteer (Vercel-kompatibel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!