⚡Features

PDF Generierung

Rechnungen und Reports als PDF erstellen

Rechnungen, Zertifikate, Reports, frueher oder spaeter braucht jede App PDF-Generierung. Mit React-PDF oder Puppeteer kannst du professionelle PDFs direkt aus deiner App erstellen.

Pro-Tip — Der schnelle Weg

Fuer einfache PDFs nutze @react-pdf/renderer weil du React-Komponenten schreiben kannst. Fuer pixel-perfekte PDFs die genau wie eine Webseite aussehen sollen nutze Puppeteer mit HTML-to-PDF.

Seite 1

React-PDF installieren

React-PDF laesst dich PDFs mit React-Komponenten bauen. Du schreibst JSX und bekommst ein PDF. Laeuft serverseitig in Route Handlers.

npm install @react-pdf/renderer

PDF-Vorlage als Komponente

Definiere das PDF-Layout mit speziellen React-PDF Komponenten. StyleSheet funktioniert aehnlich wie CSS aber mit Flexbox-Subset.

import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
page: { padding: 40, fontSize: 12, fontFamily: 'Helvetica' },
header: { fontSize: 24, marginBottom: 20, fontWeight: 'bold' },
row: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 4 },
total: { fontSize: 16, fontWeight: 'bold', marginTop: 20, textAlign: 'right' },
});

function Invoice({ data }) {
return (
<Document>
<Page size='A4' style={styles.page}>
<Text style={styles.header}>Rechnung #{data.number}</Text>
{data.items.map((item, i) => (
<View key={i} style={styles.row}>
<Text>{item.name}</Text>
<Text>{item.price} EUR</Text>
</View>
))}
<Text style={styles.total}>Gesamt: {data.total} EUR</Text>
</Page>
</Document>
);
}

PDF Route Handler

Erstelle einen API-Endpunkt der das PDF generiert und als Download zurueckgibt.

// app/api/invoice/[id]/route.ts
import { renderToBuffer } from '@react-pdf/renderer';

export async function GET(request: Request, { params }: { params: { id: string } }) {
const invoice = await db.invoice.findUnique({ where: { id: params.id } });
if (!invoice) return Response.json({ error: 'Not found' }, { status: 404 });

const buffer = await renderToBuffer(<Invoice data={invoice} />);
return new Response(buffer, {
headers: {
'Content-Type': 'application/pdf',
'Content-Disposition': `attachment; filename="rechnung-${invoice.number}.pdf"`,
},
});
}

Download im Frontend

Erstelle einen Download-Button der das PDF von der API holt und den Browser-Download ausloest.

async function downloadInvoice(invoiceId: string) {
const res = await fetch(`/api/invoice/${invoiceId}`);
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `rechnung-${invoiceId}.pdf`;
a.click();
URL.revokeObjectURL(url);
}

Seite 2

Warum das funktioniert

React-Komponenten fuer PDFs bedeuten die gleiche Sprache fuer Web und Dokumente
Server-seitige Generierung funktioniert ohne Browser oder Headless Chrome
Route Handler als API-Endpunkt ist universell nutzbar von Web, Mobile und E-Mail
Buffer-Response ist effizient und streamt das PDF direkt zum Client

Tipps

React-PDF unterstuetzt keine CSS Grid, nutze Flexbox fuer alle Layouts
Fuer benutzerdefinierte Fonts registriere sie mit Font.register() vor dem Rendern
Generiere PDFs asynchron mit einer Job Queue wenn sie lange dauern
Speichere generierte PDFs in S3/R2 damit sie nicht bei jedem Download neu erstellt werden

Seite 3

Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen