📎 Angular + PDF-Export – Automatisierte Reports mit Base64 + Charts

Du willst PDF-Reports direkt aus deiner Angular-App generieren – mit eingebetteten Charts, dynamischen Inhalten und Branding?

In diesem Beitrag zeige ich dir:

• Wie du HTML + Charts in PDF umwandelst
• Wie Base64-Encoded Charts perfekt integriert werden
• Und wie du Reports automatisiert generierst

📦 Benötigte Tools

Installiere:

npm install jspdf html2canvas

Optional für Charts:

npm install highcharts

🛠 Setup für PDF-Export

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

generatePDF() {
  const element = document.getElementById('pdf-section');

  html2canvas(element!).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF();
    pdf.addImage(imgData, 'PNG', 0, 0, 210, 297);
    pdf.save('report.pdf');
  });
}

➡ Exportiere jeden DOM-Abschnitt als Bild + PDF

📊 Highcharts als Base64

exportChart(chart: Highcharts.Chart): string {
  return chart.getSVGForExport({}).toString('base64');
}

Dann:

pdf.addImage('data:image/svg+xml;base64,' + svgBase64, 'PNG', 10, 10, 180, 100);

📄 Dynamischer Reportaufbau

Nutze *ngIf, @Input() und ng-template für konfigurierbare Layouts:

<div id="pdf-section">
  <app-header />
  <app-user-summary [user]="user" />
  <app-chart-export [chart]="myChart" />
</div>

➡ So kannst du Inhalte individuell zusammenstellen

🧩 Best Practices

• Nutze html2canvas mit festen Größen (keine % in PDF-Bereich!)
• Logos & Markenfarben per CSS einbinden
• Charts Base64 codieren vor dem Export
• Reports serverseitig generieren, wenn viele Seiten/Benutzer

✅ Fazit

Angular + PDF = 🚀
Ob Rechnung, Angebotsreport oder Dashboard-Export –
du hast die volle Kontrolle, das Branding und die Automatisierung in deiner Hand.

📍 Bald im Blog: 🎯 Angular Performance: ChangeDetection, Signals & Zonenfrei