PDF-Generierung in TypeScript: Überblick über Bibliotheken und Tools

PDF-Generierung in TypeScript: Überblick über Tools

Die Generierung von PDF-Dokumenten ist eine häufige Aufgabe in der Webentwicklung. Dank TypeScript und leistungsstarker Bibliotheken können Sie komplexe Berichte, Rechnungen, Zertifikate und andere Dokumente direkt im Browser oder auf dem Server (Node.js) erstellen. In diesem Artikel betrachten wir die wichtigsten Bibliotheken für die Arbeit mit PDF in TypeScript, ihre Besonderheiten und Anwendungsbeispiele.

1. jsPDF – eine leichte und beliebte Bibliothek

jsPDF ist eine der am weitesten verbreiteten Bibliotheken zur PDF-Erstellung auf der Client-Seite. Sie ermöglicht die Generierung von Dokumenten direkt im Browser, nur mit JavaScript/TypeScript. Die Bibliothek unterstützt Text, Bilder, Tabellen und grundlegende Formatierung.

Installation

npm install jspdf @types/jspdf

Beispiel: Erstellen eines einfachen PDF

import { jsPDF } from 'jspdf';

const doc = new jsPDF();doc.text('Hallo, Welt!', 10, 10);doc.save('document.pdf');

Vorteile und Nachteile

• ✅ Einfach zu bedienen
• ✅ Funktioniert im Browser und Node.js (mit zusätzlichen Modulen)
• ❌ Eingeschränkte Unterstützung für komplexe Layouts
• ❌ Schwierig mit Tabellen zu arbeiten (manuelle Konfiguration erforderlich)

2. PDFKit – ein leistungsstarkes Tool für die serverseitige Generierung

PDFKit ist eine Bibliothek für Node.js, die volle Kontrolle über die PDF-Erstellung bietet. Sie ist ideal für die serverseitige Generierung komplexer Dokumente: Berichte, Rechnungen, Broschüren. Unterstützt Schriftarten, Farbverläufe, Vektorgrafiken und mehrseitige Dokumente.

Installation

npm install pdfkit @types/pdfkit

Beispiel: Erstellen eines PDF mit Text und Bild

import PDFDocument from 'pdfkit';import fs from 'fs';

const doc = new PDFDocument();doc.pipe(fs.createWriteStream('output.pdf'));

doc.fontSize(25).text('Überschrift', 100, 100);doc.image('path/to/image.png', 100, 150, { width: 200 });doc.end();

Vorteile und Nachteile

• ✅ Flexibilität und volle Kontrolle
• ✅ Unterstützung für komplexe Grafiken
• ❌ Funktioniert nicht im Browser (nur Node.js)
• ❌ Komplexere API im Vergleich zu jsPDF

3. Puppeteer – Generierung von HTML zu PDF

Puppeteer ist eine Bibliothek zur Steuerung eines headless Chrome-Browsers. Sie ermöglicht die Konvertierung von HTML-Seiten in PDF, was praktisch ist, wenn Sie bereits ein Layout des Dokuments haben (z. B. eine Rechnung oder einen Bericht). Geeignet sowohl für die clientseitige als auch für die serverseitige Generierung.

Installation

npm install puppeteer

Beispiel: PDF-Generierung aus HTML

import puppeteer from 'puppeteer';

async function generatePDF() {  const browser = await puppeteer.launch();  const page = await browser.newPage();  await page.setContent('<h1>Hallo, PDF!</h1><p>Dies ist ein Bericht.</p>');  await page.pdf({ path: 'report.pdf', format: 'A4' });  await browser.close();}

generatePDF();

Vorteile und Nachteile

• ✅ Volle Nutzung von CSS und HTML
• ✅ Unterstützung für komplexe Layouts und Stile
• ❌ Erfordert die Installation von Chrome (große Größe)
• ❌ Langsamer als spezialisierte Bibliotheken

4. pdfmake – Generierung basierend auf JSON-Struktur

pdfmake ist eine Bibliothek, die einen deklarativen Ansatz verwendet: Sie beschreiben die Dokumentstruktur in JSON, und die Bibliothek erstellt selbst das PDF. Ideal für die Erstellung von Tabellen, Listen und Berichten.

Installation

npm install pdfmake @types/pdfmake

Beispiel: Erstellen eines PDF mit Tabelle

import pdfMake from 'pdfmake/build/pdfmake';import pdfFonts from 'pdfmake/build/vfs_fonts';

pdfMake.vfs = pdfFonts.pdfMake.vfs;

const docDefinition = {  content: [    { text: 'Bericht'