Tutorials

HTML zu PDF konvertieren mit jsPDF und html2canvas (CDN-Version)

Melden

Hier ist ein ausführliches Tutorial, wie du HTML-Inhalte mithilfe der Bibliotheken jsPDF und html2canvas über eine CDN-Einbindung in ein PDF-Dokument umwandelst.

Diese Methode ist besonders beliebt, da sie es ermöglicht, komplexe CSS-Layouts originalgetreu zu übernehmen. html2canvas erstellt quasi einen "Screenshot" deines HTML-Elements, und jsPDF fügt dieses Bild in ein PDF-Dokument ein.

Schritt 1: Die Bibliotheken per CDN einbinden

Zuerst musst du die notwendigen Skripte in den <head> oder am Ende des <body> deiner HTML-Datei einfügen. Wir nutzen hier die aktuellen Versionen über das cdnjs-Verzeichnis.

<!-- html2canvas Bibliothek -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<!-- jsPDF Bibliothek -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

Schritt 2: Die HTML-Struktur erstellen

Erstelle einen Bereich, den du exportieren möchtest, und einen Button, der den Export auslöst.

<div id="pdf-content" style="padding: 20px; border: 1px solid #ccc; background-color: #f9f9f9;">
    <h1>Mein PDF-Bericht</h1>
    <p>Dies ist ein Beispiel für Text, der aus HTML in ein PDF konvertiert wird.</p>
    <table border="1" style="width: 100%; border-collapse: collapse;">
        <tr>
            <th>Name</th>
            <th>Stadt</th>
        </tr>
        <tr>
            <td>Max Mustermann</td>
            <td>Berlin</td>
        </tr>
    </table>
</div>

<br>
<button id="download-btn">Als PDF speichern</button>

Schritt 3: Das JavaScript zur Konvertierung

Nun verknüpfen wir die Logik. Wir nutzen html2canvas, um das Element mit der ID pdf-content zu erfassen und es dann an jsPDF zu übergeben.

document.getElementById('download-btn').addEventListener('click', function () {
    // 1. Zugriff auf die jsPDF-Klasse (wichtig bei der CDN-Version)
    const { jsPDF } = window.jspdf;

    // 2. Das Element auswählen, das konvertiert werden soll
    const element = document.getElementById('pdf-content');

    // 3. html2canvas aufrufen
    html2canvas(element, {
        scale: 2, // Erhöht die Qualität des Screenshots
        useCORS: true // Erlaubt das Laden von Bildern von anderen Domains (falls vorhanden)
    }).then(canvas => {
        // 4. Bilddaten aus dem Canvas extrahieren
        const imgData = canvas.toDataURL('image/png');

        // 5. Neues PDF-Dokument erstellen (A4-Format)
        const pdf = new jsPDF('p', 'mm', 'a4');

        // Berechnung der Bildgröße für das PDF (Seitenverhältnis beibehalten)
        const imgProps = pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

        // 6. Bild zum PDF hinzufügen
        pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);

        // 7. PDF-Datei speichern
        pdf.save("mein-dokument.pdf");
    });
});

Funktionsweise erklärt:

  1. window.jspdf: Da wir die CDN-Version nutzen, liegt die Bibliothek im globalen window-Objekt. Wir extrahieren jsPDF daraus.
  2. html2canvas(element): Diese Funktion wandelt das HTML-Element in ein <canvas>-Objekt um. Alle CSS-Styles (Farben, Abstände, Tabellen) werden dabei visuell übernommen.
  3. toDataURL('image/png'): Das erzeugte Canvas wird in einen Base64-Bildstring umgewandelt.
  4. addImage(): Dieser Befehl platziert das Bild im PDF. Wir berechnen die Höhe (pdfHeight) dynamisch, damit das Bild nicht verzerrt wird, falls das HTML-Element breiter oder schmaler als eine A4-Seite ist.
  5. pdf.save(): Der Browser startet automatisch den Download der Datei.

Tipps für bessere Ergebnisse:

  • Skalierung: Mit scale: 2 in den html2canvas-Optionen verdoppelst du die Auflösung. Das sorgt für schärferen Text im PDF, erhöht aber die Dateigröße.
  • Seitenumbrüche: Wenn dein Inhalt sehr lang ist, wird er bei dieser einfachen Methode am Ende der ersten Seite abgeschnitten. Für mehrseitige PDFs müsste der Canvas-Inhalt in Schleifen aufgeteilt werden.
  • Schriftarten: Standardmäßig nutzt jsPDF einfache Schriften. Da wir aber ein Bild des HTMLs machen, werden alle deine Google Fonts oder speziellen CSS-Schriftarten exakt so angezeigt, wie sie im Browser aussehen.
0