PDFs mit Claude Code erzeugen: Rechnungen und Reports mit Playwright

Ein Button “PDF herunterladen” klingt klein, bis das Dokument an echte Kunden geht. Eine Rechnung braucht korrekte Beträge, Steuer, Seitenränder, lesbare Tabellen und eine Summe, die nicht durch einen Seitenumbruch verschwindet. Ein Monatsreport kombiniert Text, Screenshots, Tabellen, Diagramme und Empfehlungen. Ein Zertifikat muss Name, Datum, ID, Logo und Drucklayout zuverlässig behalten.

Der pragmatische Weg für Webteams ist HTML-to-PDF mit einem echten Browser-Renderer. Das Dokument wird als HTML gebaut, mit Print-CSS gestaltet, in Chromium gerendert und mit Playwright oder Puppeteer als PDF exportiert. Claude Code kann diese Arbeit gut beschleunigen, aber nur mit klaren Vorgaben: Papierformat, Ränder, Schriften, Hintergründe, Umbrüche, visuelle Prüfung und verbotene Abkürzungen. Ein vager Prompt führt schnell zu einem fragilen canvas-Bild oder zu schwer wartbaren Koordinaten.

Nutze offizielle Quellen als Basis: Playwright page.pdf, Puppeteer PDF generation und PDFOptions, MDN zu @page und Printing CSS, sowie den Claude Code overview. Ergänzend passen Spreadsheet-Automation, Playwright-Tests und Testing-Strategien.

Warum HTML-to-PDF zuerst

Es gibt drei typische Wege. Mit jsPDF oder ähnlichen Bibliotheken zeichnest du Text und Linien an festen Koordinaten. Das reicht für kleine Etiketten, wird bei Rechnungen aber schnell mühsam. Mit Screenshot oder canvas erzeugst du ein Bild und legst es ins PDF. Das wirkt in der ersten Ansicht gut, ist aber schlecht suchbar, größer, beim Zoomen unscharf und schwer zu testen.

HTML-to-PDF bleibt näher an normaler Webentwicklung. Tabellen bleiben Tabellen, Überschriften bleiben Überschriften, und @page steuert Papiergröße und Rand. Du kannst die Druckansicht im Browser öffnen, Screenshots vergleichen und erst danach das PDF exportieren. Claude Code bearbeitet dadurch HTML, CSS, Node-Skripte und Playwright-Tests statt undurchsichtiger Koordinaten.

flowchart TD
  A["Geschäftsdaten"] --> B["HTML-Vorlage"]
  B --> C["Print-CSS und @page"]
  C --> D["Chromium-Rendering"]
  D --> E["PDF-Datei"]
  C --> F["Screenshot-Vergleich"]
  F --> G["Review-Nachweis"]

Echte Anwendungsfälle

Der erste Fall ist die Rechnung. Sie enthält Verkäufer, Käufer, Positionen, Steuer, Summe, Fälligkeitsdatum und Rechnungsnummer. Kritische Fehler sind falsche Rundung, fehlende Steuer, verlorene Hintergrundfarbe oder eine abgeschnittene Summe.

Der zweite Fall ist der Monatsreport. SEO, Werbung, SaaS-Nutzung oder Vertrieb brauchen Zusammenfassung, Tabellen, Screenshots und Diagramme. Wichtig ist der Seitenfluss: Eine Überschrift sollte nicht allein am Seitenende stehen, und ein Diagramm sollte nicht von der Erklärung getrennt werden.

Der dritte Fall ist das Zertifikat. Name, Kurs, Datum, Zertifikats-ID, Logo und QR-Code passen meist auf eine Seite. Wichtige Informationen sollten HTML-Text bleiben; Logo, Unterschrift und QR-Code können Bilder sein.

Der vierte Fall ist ein Audit-Report. Berechtigungen, Deployments, Freigaben und Incident-Notizen müssen später nachvollziehbar sein. Lege Erstellungsdatum, Umgebung, App-Version und Datenquellen-ID in die Fußzeile.

Prompt für Claude Code

Implementiere PDF-Erzeugung.

Richtung:
- Rendere eine HTML-Vorlage mit Playwright Chromium und exportiere PDF.
- Erzeuge nicht das gesamte Dokument als einzelnes canvas-Bild.
- Nutze A4 Hochformat, 14mm Rand, sichtbare Hintergründe und Print-CSS.
- Nutze eine Schriftfamilie für Deutsch, Englisch und japanischen Text.
- Halte die Struktur für Rechnungen, Reports und Zertifikate wiederverwendbar.

Implementierung:
- Füge scripts/create-invoice-pdf.mjs hinzu.
- Erzeuge out/invoice-DE-2026-0602.pdf aus Beispieldaten.
- Formatiere Geld mit Intl.NumberFormat.
- Escape Nutzereingaben vor dem Einfügen in HTML.
- Nutze printBackground und preferCSSPageSize in page.pdf.

Verifikation:
- Dokumentiere den Ausführungsbefehl.
- Mache das Druck-HTML per Screenshot vergleichbar.
- Prüfe Schriften, Umbrüche, Hintergründe und Summe.

Ausführbarer Code

npm init -y
npm pkg set type=module
npm i -D playwright
npx playwright install chromium
mkdir scripts out
node scripts/create-invoice-pdf.mjs

import { chromium } from "playwright";
import { mkdir } from "node:fs/promises";
import { dirname, resolve } from "node:path";

const outputPath = resolve("out/invoice-DE-2026-0602.pdf");
const money = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" });

const invoice = {
  number: "DE-2026-0602",
  buyer: "Beispiel Digital GmbH",
  seller: "Masa Design Lab",
  issuedAt: "2026-06-02",
  items: [
    { name: "PDF-Vorlagendesign", quantity: 1, unitPrice: 800 },
    { name: "Playwright-Generierungsskript", quantity: 1, unitPrice: 1200 },
    { name: "Print-CSS und Schriftprüfung", quantity: 1, unitPrice: 600 },
  ],
};

function escapeHtml(value) {
  return String(value).replace(/[&<>"']/g, (char) => ({
    "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;",
  })[char]);
}

function renderHtml(data) {
  const subtotal = data.items.reduce((sum, item) => sum + item.quantity * item.unitPrice, 0);
  const tax = Math.round(subtotal * 0.19);
  const rows = data.items.map((item) => `<tr>
    <td>${escapeHtml(item.name)}</td>
    <td class="num">${item.quantity}</td>
    <td class="num">${money.format(item.unitPrice)}</td>
    <td class="num">${money.format(item.quantity * item.unitPrice)}</td>
  </tr>`).join("");

  return `<!doctype html><html lang="de"><head><meta charset="utf-8">
  <style>
    @page { size: A4; margin: 14mm; }
    body { font-family: "Noto Sans", Arial, sans-serif; color: #202124; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    header { display: flex; justify-content: space-between; border-bottom: 3px solid #1f5eff; padding-bottom: 14px; }
    h1 { margin: 0; font-size: 28px; }
    table { width: 100%; border-collapse: collapse; margin-top: 24px; }
    th { background: #eef3ff; text-align: left; }
    th, td { border-bottom: 1px solid #d7dce5; padding: 10px 8px; }
    .num { text-align: right; white-space: nowrap; }
    .total { margin-left: auto; width: 260px; margin-top: 20px; font-size: 18px; font-weight: 700; }
    .avoid-break { break-inside: avoid; page-break-inside: avoid; }
  </style></head><body>
  <header><h1>Rechnung</h1><div>Nummer: ${escapeHtml(data.number)}<br>Datum: ${escapeHtml(data.issuedAt)}</div></header>
  <p><strong>Kunde:</strong> ${escapeHtml(data.buyer)}</p>
  <p><strong>Anbieter:</strong> ${escapeHtml(data.seller)}</p>
  <table><thead><tr><th>Position</th><th class="num">Menge</th><th class="num">Preis</th><th class="num">Betrag</th></tr></thead><tbody>${rows}</tbody></table>
  <div class="total avoid-break">Summe: ${money.format(subtotal + tax)}</div>
  </body></html>`;
}

await mkdir(dirname(outputPath), { recursive: true });
const browser = await chromium.launch();
try {
  const page = await browser.newPage();
  await page.setContent(renderHtml(invoice), { waitUntil: "networkidle" });
  await page.evaluate(() => document.fonts.ready);
  await page.emulateMedia({ media: "print" });
  await page.pdf({ path: outputPath, printBackground: true, preferCSSPageSize: true, margin: { top: "0", right: "0", bottom: "0", left: "0" } });
  console.log(`Created ${outputPath}`);
} finally {
  await browser.close();
}

Häufige Fehler und Prüfung

Typische Fehler sind ein komplettes Bild-PDF, fehlendes printBackground, nicht installierte Schriften in Linux-CI, externe Logos ohne Wartezeit, nicht escapte Kundentexte und lange Notizen, die den Gesamtbetrag auf eine neue Seite schieben. Teste nicht nur den kurzen Idealfall.

Die Prüfung sollte Betragstests, Existenz der PDF-Datei und visuelle Prüfung enthalten. Öffne die Druckroute, setze page.emulateMedia({ media: "print" }) und vergleiche einen Playwright-Screenshot. Prüfe kurze und lange Rechnungen, fehlende Bilder und mehrsprachige Texte.

CTA und verifiziertes Ergebnis

PDF-Erzeugung ist gut monetarisierbar, weil sie konkrete Lieferobjekte betrifft: Rechnungen, Reports, Zertifikate, Checklisten und Kundendokumente. Starte mit dem kostenlosen Claude Code Material, nutze ClaudeCodeLab Produkte für wiederverwendbare Vorlagen und Training oder Beratung für Team-Workflows mit Review und Playwright.

Für diesen Artikel wurde der Ablauf lokal mit Node.js, Playwright Chromium und Beispieldaten geprüft. Der wichtigste Punkt war nicht der Aufruf von page.pdf, sondern das Druck-HTML als testbare Oberfläche zu behandeln. In Masas Praxis sind Schriftwechsel, verschwundene Hintergründe und unbemerkte Seitenumbrüche die häufigeren Probleme.