Dokumente automatisiert erstellen? Kein Problem mit unserem Dokumenten Generator. Egal ob Labels, Rechnungen, Lieferscheine, Informationsschreiben, etc.
Wie funktioniert die Dokument Engine?
Die Vorlagen werden genau wie Webseiten als HTML (Hypertext Markup Language) Datei erstellt. Der große Vorteil des Ansatzes ist, dass jegliche Gestaltungen möglich sind. SVG, Bilder, Tabellen, Fortgeschrittenes Layouting sind möglich!. Die Vorlage kann dann mit Daten gefüllt werden. Auch hier bietet der Ansatz große Flexibilität, da die Programmiersprache Javascript vollumfänglich zur Verfügung steht. Hierdurch können auch moderne Frameworks wie Vue oder React verwendet werden, um die Templates zu definieren und die Daten darzustellen. Technische gesehen verwendet die Engine HTML Templates. Das besondere: eine Layout funktion, die es ermöglicht Abschnitte mit Kopf und Fußzeilen zu erstellen. Des weiteren können Seitenumbrüche, Seitenzahlen und mehrseitige Tabellen einfach umgesetzt werden. Das sieht zum Beispiel wie folgt aus.
<Document>
<!-- Logo Runner: Ein Runner wird auf jeder Seite platziert zusätzlich zum Seiten Inhalt -->
<Runner class="w-100 text-end p-5 px-9">
<div class="d-flex justify-content-between">
{#if theme?.logo}
<img width="200" style="object-fit: scale-down" src={theme.logo}>
{/if}
</div>
</Runner>
<!-- Footer Runner -->
<Runner name="footer" style="font-size: 7pt" class="w-100 bottom-0 text-center px-10 py-3 row g-0">
<div class="col row g-0 justify-content-between">
{#each Object.entries(footer) as [key, value]}
<div class="col text-nowrap flex-grow-0"><strong>{key}:</strong> {value}</div>
{/each}
<span class="pt-1 page-number"></span>
</div>
</Runner>
<!--PAGE-->
<div class="row pb-4">
<div class="col fs-6">
<div class="opacity-50" style="font-size: 7pt">
<br>
<span class="">
{#if company?.companyName}<strong>{company.companyName}</strong>{/if}
{#if company?.companyAddress}<br>{company.companyAddress.replaceAll("
", " • ")}{/if}
</span>
</div>
<div class="pt-1" style="font-size: 9.5pt; font-weight: bold">
{billToName}
</div>
<div class="" style="font-size: 9.5pt">
{#each billToAddressLines as line, index}
{line}{#if index < billToAddressLines.length - 1}<br>{/if}
{/each}
</div>
</div>
<div class="col pt-10">
<div class="pb-1" style="font-size: 10pt"><strong>{documentTitle}</strong></div>
<div style="margin-left: -12px; margin-right: -12px" class="mb-1 border-bottom"></div>
<div class="row justify-content-between">
<div class="col pb-1" style="font-size: 10pt">{numberLabel}</div>
<div class="col pb-1 text-end" style="font-size: 10pt">{docNo}</div>
</div>
{#if documentDate}
<div class="row justify-content-between">
<div class="col pb-1" style="font-size: 10pt">Datum</div>
<div class="col pb-1 text-end" style="font-size: 10pt">{documentDate}</div>
</div>
{/if}
{#if dueDate}
<div class="row justify-content-between">
<div class="col pb-1" style="font-size: 10pt">Fälligkeitsdatum</div>
<div class="col pb-1 text-end" style="font-size: 10pt">{dueDate}</div>
</div>
{/if}
{#if validUntil}
<div class="row justify-content-between">
<div class="col pb-1" style="font-size: 10pt">Gültig bis</div>
<div class="col pb-1 text-end" style="font-size: 10pt">{validUntil}</div>
</div>
{/if}
{#if deliveryDate}
<div class="row justify-content-between">
<div class="col pb-1" style="font-size: 10pt">Lieferdatum</div>
<div class="col pb-1 text-end" style="font-size: 10pt">{deliveryDate}</div>
</div>
{/if}
<div class="row justify-content-between">
<div class="col pb-1" style="font-size: 10pt"><strong>{currencyCode}</strong></div>
<div class="col pb-1 text-end" style="font-size: 10pt"><strong>{formatCurrency(totalGross)}</strong></div>
</div>
</div>
</div>
<Runner class="w-100 px-9 py-4">
<div style="font-size: 10pt" class="row g-0 justify-content-between">
<div class="mb-5 text-end"><img width="200" src={theme.logo}></div>
<div class="col text-start">Beschreibung</div>
<div class="col p-0 flex-nowrap d-flex">
<div class="text-end" style="width: 25%; padding-left: 0.25rem; padding-right: 0.25rem">Menge</div>
<div class="text-end" style="width: 20%; padding-left: 0.25rem; padding-right: 0.25rem">Einheit</div>
<div class="text-end" style="width: 25%; padding-left: 0.25rem; padding-right: 0.25rem">Preis</div>
<div class="text-end" style="width: 30%; padding-left: 0.25rem; padding-right: 0">Betrag</div>
</div>
</div>
<div style="margin-left: -12px; margin-right: -12px; margin-top: 4px;" class="border-bottom"></div>
</Runner>
<section>
{#if document?.note}
<div style="font-size: 10pt" class="mb-2">{document.note}</div>
{/if}
<table class="w-100">
<thead>
<tr>
<td>
<div style="font-size: 10pt" class="row g-0 justify-content-between mt-4">
<div class="col" style="width: 50%">Beschreibung</div>
<div class="col p-0 flex-nowrap d-flex" style="width: 50%">
<div class="text-end" style="width: 25%; padding-left: 0.25rem; padding-right: 0.25rem">Menge</div>
<div class="text-end" style="width: 20%; padding-left: 0.25rem; padding-right: 0.25rem">Einheit</div>
<div class="text-end" style="width: 25%; padding-left: 0.25rem; padding-right: 0.25rem">Preis</div>
<div class="text-end" style="width: 30%; padding-left: 0.25rem; padding-right: 0">Betrag</div>
</div>
</div>
<div style="margin-left: -12px; margin-right: -12px" class="mb-1 border-bottom"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 0">
<div class="content">
<!-- Runner Content-->
{#each lines as line}
<Product {line} formatNumber={formatNumber} formatCurrency={formatCurrency}></Product>
{/each}
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<div></div>
</td>
</tr>
</tfoot>
</table>
</section>
<Runner modus="next" class="w-100 text-end p-5 px-9">
{#if theme?.logo}
<img width="200" src={theme.logo}>
{/if}
</Runner>
<NoBreak>
<div class="row g-0 pt-4" style="font-size: 10pt">
<div class="col"></div>
<div class="col row g-0 justify-content-between">
<div class="col flex-grow-0 text-nowrap"><strong>Gesamt {currencyCode}</strong></div>
<div class="col flex-grow-0"><strong>{formatCurrency(totalGross)}</strong></div>
</div>
</div>
{#if document?.terms}
<div style="font-size: 10pt" class="pt-2">{document.terms}</div>
{/if}
</NoBreak>
</Document>