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.
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:
Wir werden eine Kombination aus @sparticuz/chromium-min und puppeteer-core verwenden, um diese Einschränkungen zu überwinden. So gehen wir vor:
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"
}
}
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" }
});
}
}
Lassen Sie uns die wichtigsten Teile dieses Codes aufschlüsseln:
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.
Die Hauptlogik für die PDF-Generierung liegt in der POST-Funktion:
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>Hello, World!</h1>' }),
});
if (response.ok) {
const blob = await response.blob();
// Handle the PDF blob (e.g., download or display)
}
Beachten Sie bei der Bereitstellung in Vercel die folgenden Punkte:
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.
Speichernutzung: Achten Sie auf die Speichernutzung. Die minimale Chromium-Binärdatei hilft, aber komplexe PDFs beanspruchen möglicherweise immer noch viel Speicher.
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.
Fehlerbehandlung: Implementieren Sie eine robuste Fehlerbehandlung, um Zeitüberschreitungen oder Ressourcenbeschränkungen zu verwalten.
Caching: Erwägen Sie die Implementierung von Caching-Strategien für häufig generierte PDFs, um die Belastung Ihrer serverlosen Funktionen zu reduzieren.
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!
