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');
}pdfMake
1. Import
Die pdfmake Libary wird im serverseitigen Skript über die "Externen Bibliotheken" im Prozessstudio geladen.
2. Struktur der PDF festlegen
Im Formularskript wird ein Inhalt (content) als JSON-Struktur erzeugt, der an den Server übergeben wird. Zum Beispiel im Kalkulationsschema:
var content = getHeader(form.t('Kalkulationsschema FIS'));
content.push(
{ text: form.t('Projekt-Nr.: ' + data.printContainer.projektNr), style: 'subheader' },
{ text: form.t('Bezeichnung: ' + data.printContainer.bezeichnung), style: 'subheader' },
{ style: 'tableExample', table: {
headerRows: 1,
body: [
[{text: 'Nr.', style:'tableHeader'}, {text: 'Kalkulationsbestandteil', style:'tableHeader'}, {text: 'Betrag', style:'tableHeader'}],
['1', 'Personalkosten', data.printContainer.PersCost_sum + ' €'],
...
]
}, layout: 'headerLineOnly' }
);
3. Erstellung der PDF
Die JSON-Daten werden an ein Server-Skript übermittelt, das mit pdfmake das PDF generiert:
var result = await fetch('/scripting/script/UUID/run', {
method: 'POST',
body: JSON.stringify(pdfData)
});
if (result.ok) {
var blob = await result.blob();
var file = window.URL.createObjectURL(blob);
window.open(file, '_blank');
}4. Server-Skript
Nachfolgend finden Sie ein vollständiges Beispiel eines Server-Skripts zur Generierung von PDFs mit pdfmake im d.velop Process Studio als Skript:
const UnicodeTrieBuilder = require('unicode-trie/builder');
const fs = require('fs');
// create a trie
let t = new UnicodeTrieBuilder();
t.freeze();
/*d-velop Cloud?: Please use this:
filenames = fs.readdirSync('/tmp');
fs.writeFileSync('/tmp/' + filenames[0] + '/data.trie', t.toBuffer());
fs.writeFileSync('/tmp/' + filenames[0] + '/indic.trie', t.toBuffer());
fs.writeFileSync('/tmp/' + filenames[0] + '/use.trie', t.toBuffer());
fs.writeFileSync('/tmp/' + filenames[0] + '/classes.trie', t.toBuffer());
/*
/* ON-PREMISE?: Please use this:*/
fs.writeFileSync('data.trie', t.toBuffer());
fs.writeFileSync('indic.trie', t.toBuffer());
fs.writeFileSync('use.trie', t.toBuffer());
fs.writeFileSync('classes.trie', t.toBuffer());
const PDFMAKE = require('pdfmake');
module.exports = async (req, res) => {
let body = req.json();
var fonts = {
Roboto: {
normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.3.0-beta.1/fonts/Roboto/Roboto-Regular.ttf',
bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.3.0-beta.1/fonts/Roboto/Roboto-Medium.ttf',
italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.3.0-beta.1/fonts/Roboto/Roboto-Italic.ttf',
bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.3.0-beta.1/fonts/Roboto/Roboto-MediumItalic.ttf'
}
};
PDFMAKE.addFonts(fonts);
var doc = PDFMAKE.createPdf(body);
var buffer = await doc.getBuffer();
res.status(200).set("Content-Type", "application/pdf").send(buffer);
}Dieses Skript erkennt nicht automatisch die Umgebung. Sie müssen selbst den passenden Bereich aktivieren (Cloud oder On-Premise).
Gestaltung der PDF
Zur Gestaltung einer PDF verwenden Sie am besten den pdfmake-playground.