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, Dokumente im PDF-Format zu erstellen – von einfachen Belegen und Quittungen bis hin zu komplexen Analyseberichten mit Diagrammen. TypeScript, als streng typisierte Erweiterung von JavaScript, bietet hervorragende Möglichkeiten für die Arbeit mit PDFs. Unter den vielen Bibliotheken sticht pdf-lib hervor – ein leistungsstarkes, vollständig clientseitiges Tool, das keine Serverabhängigkeiten erfordert.

In diesem Artikel werden wir im Detail besprechen, wie man pdf-lib zur Generierung von PDF-Berichten in TypeScript verwendet, einschließlich Installation, grundlegender Operationen und fortgeschrittener Techniken.

Was ist pdf-lib?

pdf-lib ist eine Open-Source-Bibliothek, die in TypeScript geschrieben wurde und es ermöglicht, PDF-Dokumente direkt im Browser oder in der Node.js-Umgebung zu erstellen und zu bearbeiten. Ihre Hauptvorteile sind:

• Vollständige TypeScript-Unterstützung (alle Typen sind enthalten)
• Arbeit ohne externe Abhängigkeiten (keine Notwendigkeit für Puppeteer oder wkhtmltopdf)
• Möglichkeit der Arbeit mit vorhandenen PDFs (Zusammenführen, Einfügen von Seiten)
• Unterstützung für kyrillische Schrift und beliebige Schriftarten
• Einbettung von Bildern (PNG, JPG, SVG)
• Erstellung von Formularen und Anmerkungen

Installation und Einrichtung

Die Installation erfolgt über den Standard-Paketmanager:

npm install pdf-lib# oderyarn add pdf-lib

Für die Arbeit mit TypeScript sind keine zusätzlichen Schritte erforderlich – alle Typen sind bereits im Paket enthalten.

Basisbeispiel: Erstellung eines einfachen Berichts

Betrachten wir die Erstellung eines minimalen PDF-Dokuments mit Titel und Text:

import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';

async function createSimpleReport() {  // 1. Neues PDF-Dokument erstellen  const pdfDoc = await PDFDocument.create();    // 2. Seite hinzufügen (Format A4: 595.28 x 841.89 Punkte)  const page = pdfDoc.addPage([595.28, 841.89]);    // 3. Standardschriftart einbetten  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);    // 4. Titel zeichnen  page.drawText('Umsatzbericht Q1 2025', {    x: 50,    y: 800,    size: 24,    font: font,    color: rgb(0, 0.2, 0.6),  });    // 5. Haupttext zeichnen  page.drawText('Gesamtumsatz: 1.234.567 Rubel', {    x: 50,    y: 760,    size: 14,    font: font,    color: rgb(0, 0, 0),  });    // 6. Dokument als Uint8Array speichern  const pdfBytes = await pdfDoc.save();  return pdfBytes;}

Arbeit mit Tabellen und Daten

Für die Erstellung von tabellarischen Berichten ist etwas mehr Logik erforderlich. Hier ist ein Beispiel für die Generierung einer Tabelle mit Daten:

import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';

interface SaleRecord {  product: string;  quantity: number;  price: number;}

async function createTableReport(data: SaleRecord[]) {  const pdfDoc = await PDFDocument.create();  const page = pdfDoc.addPage([595.28, 841.89]);  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);  const boldFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);    const startX = 50;  let startY = 800;  const rowHeight = 25;  const colWidths = [200, 100, 100, 100]; // Bezeichnung, Menge, Preis, Summe    // Tabellenkopf  const headers = ['Bezeichnung', 'Menge', 'Preis', 'Summe'];  page.drawText(headers[0], { x: startX, y: startY, size: 12, font: boldFont });  page.drawText(headers[1], { x: startX + colWidths[0], y: startY, size: 12, font: boldFont });  page.drawText(headers[2], { x: startX + colWidths[0] + colWidths[1], y: startY, size: 12, font: boldFont });  page.drawText(headers[3], { x: startX + colWidths[0] + colWidths[1] + colWidths[2], y: startY, size: 12, font: boldFont });    startY -= rowHeight;    // Datenzeilen  for (const record of data) {    const total = reco