Formular als PDF erzeugen
html2pdf
1. Import
Zunächst müssen Sie die Library html2pdf.js einbinden. Dies erfolgt über die folgende Methode:
loadCScript('https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js');Diese Methode lädt das Skript aus einem öffentlichen CDN nach.
2. Was soll gedruckt werden?
Der Bereich, den Sie als PDF ausgeben möchten, muss im Formular mit einer eindeutigen CSS-Klasse gekennzeichnet werden, z. B.:
<div class="formio-component-printContainer">
<!-- Hier steht der Inhalt, der später als PDF ausgegeben werden soll -->
</div>Diese Klasse wird später gezielt zur PDF-Erzeugung angesprochen.
3. PDF-Funktionen nutzen
3.1 PDF herunterladen
Mit der folgenden Funktion können Sie den gewünschten HTML-Bereich als PDF im Browser speichern lassen:
const downloadPDF = async (cssClassName) => {
const element = document.getElementsByClassName(cssClassName);
return html2pdf()
.set({ html2canvas: { scale: 4 }, margin: [10, 10, 10, 10] })
.from(element[0])
.save("dokument.pdf");
};Hinweis zur Qualität
Mit html2canvas: { scale: 4 } wird das PDF in hoher Auflösung erstellt. Falls die Erstellung zu lange dauert, können Sie den Wert auf z.B. 2 reduzieren, um die Auflösung zu senken und so die Geschwindigkeit zu erhöhen.
Beispiel-Aufruf im Formular-Script:
downloadPDF('formio-component-printContainer');
3.2 PDF als Blob zur weiteren Verarbeitung erzeugen
Falls das PDF z. B. in das Dokumentenmanagementsystem hochgeladen werden soll, können Sie den Inhalt auch als Blob ausgeben:
const getBlobPDF = async (cssClassName) => {
const element = document.getElementsByClassName(cssClassName);
return html2pdf()
.set({ html2canvas: { scale: 4 }, margin: [10, 10, 10, 10] })
.from(element[0])
.output("blob", "dokument.pdf");
};Hinweis zur Qualität
Mit html2canvas: { scale: 4 } wird das PDF in hoher Auflösung erstellt. Falls die Erstellung zu lange dauert, können Sie den Wert auf z.B. 2 reduzieren, um die Auflösung zu senken und so die Geschwindigkeit zu erhöhen.
4. Verwendung
Sie können die Funktion z. B. über einen Formular-Button auslösen:
async function exportToPDF(form, data) {
await downloadPDF('formio-component-printContainer');
}