Generierung von PDF-Berichten in TypeScript: Die Bibliothek PDF-Lib

Generierung von PDF-Berichten in TypeScript mit der Bibliothek PDF-Lib

In der modernen Webentwicklung entsteht häufig die Notwendigkeit, komplexe PDF-Dokumente zu erstellen: Berichte, Rechnungen, Zertifikate oder Analyse-Dashboards. TypeScript macht diesen Prozess durch seine strenge Typisierung zuverlässig und vorhersagbar. Unter den vielen Bibliotheken für die Arbeit mit PDF auf der Node.js-Plattform und im Browser sticht PDF-Lib hervor – ein leichtgewichtiges, leistungsstarkes und vollständig in TypeScript geschriebenes Werkzeug.

PDF-Lib erfordert keine Installation zusätzlicher nativer Abhängigkeiten (im Gegensatz zu schwergewichtigen Lösungen wie Puppeteer oder wkhtmltopdf), funktioniert sowohl in Node.js als auch im Browser und unterstützt alle modernen PDF-Funktionen: Einbetten von Schriftarten, Bildern, Erstellen von Formularen, Anmerkungen und vieles mehr.

Installation und erstes Dokument

Um zu beginnen, reicht es aus, das Paket über npm zu installieren:

npm install pdf-lib

Erstellen wir ein einfaches PDF-Dokument mit Text:

import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';\n\nasync function createSimplePdf() {\n  // Ein neues PDF-Dokument erstellen\n  const pdfDoc = await PDFDocument.create();\n\n  // Eine Seite hinzufügen (Format A4)\n  const page = pdfDoc.addPage([595.28, 841.89]); // A4 in Punkten\n\n  // Eine Standardschriftart einbetten\n  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);\n\n  // Text zeichnen\n  page.drawText('Hallo, Welt!', {\n    x: 50,\n    y: 700,\n    size: 30,\n    font: font,\n    color: rgb(0.2, 0.4, 0.8),\n  });\n\n  // Das Dokument in Bytes speichern\n  const pdfBytes = await pdfDoc.save();\n  return pdfBytes;\n}\n\n// Beispiel zur Verwendung\ncreateSimplePdf().then((bytes) => {\n  // In Node.js kann man in eine Datei schreiben\n  // require('fs').writeFileSync('hello.pdf', bytes);\n  console.log('PDF erstellt! Größe:', bytes.length, 'Bytes');\n});

Arbeiten mit russischem Text und benutzerdefinierten Schriftarten

Eine der Hauptaufgaben bei der Generierung von Berichten in russischer Sprache ist die korrekte Darstellung von Kyrillisch. Die Standard-PDF-Schriftarten (Helvetica, Times, Courier) enthalten keine kyrillischen Glyphen. Die Lösung besteht darin, eine TrueType-Schriftart mit Unicode-Unterstützung einzubetten.

import { PDFDocument, rgb } from 'pdf-lib';\nimport fontkit from '@pdf-lib/fontkit';\nimport fs from 'fs';\n\nasync function createRussianPdf() {\n  const pdfDoc = await PDFDocument.create();\n\n  // fontkit für die Arbeit mit benutzerdefinierten Schriftarten registrieren\n  pdfDoc.registerFontkit(fontkit);\n\n  // Eine Schriftart mit Kyrillisch laden (z.B. Roboto)\n  const fontBytes = fs.readFileSync('Roboto-Regular.ttf');\n  const customFont = await pdfDoc.embedFont(fontBytes);\n\n  const page = pdfDoc.addPage([595.28, 841.89]);\n\n  page.drawText('Berichtsgenerierung in TypeScript', {\n    x: 50,\n    y: 750,\n    size: 24,\n    font: customFont,\n    color: rgb(0, 0, 0),\n  });\n\n  page.drawText('Datum: 2024-01-15', {\n    x: 50,\n    y: 700,\n    size: 14,\n    font: customFont,\n    color: rgb(0.3, 0.3, 0.3),\n  });\n\n  return await pdfDoc.save();\n}

Erstellung von Tabellen und strukturierten Berichten

PDF-Lib hat kein integriertes Modul für Tabellen, aber diese lassen sich leicht manuell durch das Zeichnen von Linien und die Positionierung von Text realisieren. Der Einfachheit halber kann man eine Hilfsfunktion erstellen:

interface TableCell {\n  text: string;\n  width: number;\n  height?: number;\n  align?: 'left' | 'center' | 'right';\n}\n\nasync function drawTable(\n  page: PDFPage,\n  headers: TableCell[],\n  rows: TableCell[][],\n  startX: number,\n  startY: number,\n  font: PDFFont,\n  fontSize: number = 12\n) {\n  const cellPadding = 5;\n  const rowHeight = fontSize + 2 * cellPadding;\n  let currentY = startY;\n\n  // Kopfzeilen zeichnen\n  let currentX = startX;\n  for (const header of headers) {\n    page.drawRectangle({\n      x: currentX,\n      y: currentY - rowHeight,\n      width: header.width,\n      height: rowHeight,\n      color: rgb(0.9, 0.9, 0.9),\n