Tutorials

HTML in PDF umwandeln in Vue.js mit jsPDF und html2canvas

Melden

Hier ist ein ausführliches Tutorial, wie du HTML-Inhalte in einer Vue.js-Anwendung mithilfe von jsPDF und html2canvas in ein PDF-Dokument umwandelst.

In der modernen Webentwicklung ist es eine häufige Anforderung, Rechnungen, Berichte oder Dashboards direkt aus dem Browser als PDF zu exportieren. Da jsPDF allein Schwierigkeiten mit komplexem CSS hat, nutzen wir html2canvas, um den HTML-Inhalt zuerst in ein Bild zu rendern und dieses dann in das PDF einzufügen.

Voraussetzungen

  • Eine bestehende Vue.js Anwendung (Vue 2 oder 3).
  • Grundkenntnisse in JavaScript/TypeScript.

Schritt 1: Pakete installieren

Zuerst müssen die beiden notwendigen Bibliotheken über npm oder yarn installiert werden. Öffne dein Terminal im Projektordner und führe aus:

npm install jspdf html2canvas
# oder
yarn add jspdf html2canvas

Schritt 2: Die Vue-Komponente vorbereiten

Wir erstellen eine Komponente mit einem Bereich, der exportiert werden soll, und einer Schaltfläche, die den Prozess auslöst. Wir nutzen das ref-Attribut, um direkt auf das DOM-Element zuzugreifen.

<template>
  <div>
    <!-- Dieser Bereich wird exportiert -->
    <div ref="pdfContent" class="pdf-container">
      <h1>Mein Export-Dokument</h1>
      <p>Dies ist ein Beispiel für HTML-Inhalt, der in ein PDF umgewandelt wird.</p>
      <table border="1">
        <tr>
          <th>Name</th>
          <th>Position</th>
        </tr>
        <tr>
          <td>Max Mustermann</td>
          <td>Entwickler</td>
        </tr>
      </table>
    </div>

    <!-- Button zum Starten des Exports -->
    <button @click="exportToPDF" class="export-btn">
      Als PDF speichern
    </button>
  </div>
</template>

<style scoped>
.pdf-container {
  padding: 20px;
  background-color: white;
  color: #333;
  font-family: Arial, sans-serif;
}
.export-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}
</style>

Schritt 3: Die Export-Logik implementieren

Jetzt implementieren wir die Funktion exportToPDF. Hierbei konvertiert html2canvas das HTML in ein Canvas-Objekt, welches wir dann als Bild in jsPDF einbetten.

<script setup>
import { ref } from 'vue';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

const pdfContent = ref(null);

const exportToPDF = async () => {
  const element = pdfContent.value;

  // 1. HTML-Element in Canvas umwandeln
  const canvas = await html2canvas(element, {
    scale: 2, // Höhere Qualität durch Skalierung
    useCORS: true, // Erlaubt das Laden von Bildern von anderen Domains
    logging: false
  });

  // 2. Bilddaten aus Canvas extrahieren
  const imgData = canvas.toDataURL('image/png');

  // 3. jsPDF Instanz erstellen (A4 Format)
  const pdf = new jsPDF({
    orientation: 'portrait',
    unit: 'mm',
    format: 'a4'
  });

  // 4. Maße berechnen, damit das Bild auf die A4-Seite passt
  const imgProps = pdf.getImageProperties(imgData);
  const pdfWidth = pdf.internal.pageSize.getWidth();
  const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

  // 5. Bild zum PDF hinzufügen und speichern
  pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
  pdf.save('mein-dokument.pdf');
};
</script>

Wichtige Tipps für bessere Ergebnisse

1. Auflösung verbessern

Durch die Option scale: 2 in den html2canvas-Einstellungen wird die Auflösung des "Snapshots" verdoppelt. Das verhindert, dass der Text im PDF verpixelt aussieht.

2. Seitenumbrüche

Wenn dein Inhalt länger als eine DIN-A4-Seite ist, wird er bei der obigen Methode einfach abgeschnitten oder verkleinert. Für mehrseitige PDFs müsstest du den Inhalt in Schleifen aufteilen oder die Höhe des Canvas berechnen und Bildabschnitte versetzt auf neue PDF-Seiten (pdf.addPage()) legen.

3. CSS-Einschränkungen

html2canvas unterstützt nicht alle CSS-Eigenschaften (z. B. komplexe Box-Shadows oder bestimmte CSS-Grid-Layouts). Halte das Design für den Exportbereich so einfach wie möglich.

4. Bilder laden

Falls Bilder im HTML nicht im PDF erscheinen, stelle sicher, dass sie per CORS geladen werden dürfen oder konvertiere sie vorher in Base64-Strings.

Zusammenfassung

Die Kombination aus html2canvas und jsPDF ist der flexibelste Weg in Vue.js, um PDFs zu generieren, da du das Design direkt mit HTML und CSS festlegen kannst, anstatt die PDF-Struktur mühsam manuell in JavaScript definieren zu müssen.

0