Jinja2PDF
Angebot mit optionalen Positionen
Ein Angebot im deutschen Brieflayout: Optionale Positionen stehen in der Liste, bleiben aber aus der Summe, Rabatt und Umsatzsteuer werden in der Vorlage berechnet, und die Gültigkeit ergibt sich aus dem Angebotsdatum. Die Fußzeile trägt die Pflichtangaben für Geschäftsbriefe.
Kostenloser Plan, keine Kreditkarte. Sie erhalten eine eigene Kopie im Editor, veröffentlicht und bereit für die API.
Gerendertes Ergebnis
Was dieses Beispiel zeigt
where('optional', false)hält optionale Positionen aus der Summe, während die Tabelle sie weiterhin aufführt, als optional markiert.- Rabatt und Umsatzsteuer sind Arithmetik in der Vorlage: 5 % auf
17.100,00 €, dann 19 % Umsatzsteuer, ergibt die19.331,55 €auf der Seite. dateAdd(quote.valid_days, 'days')macht aus dem Angebotsdatum „Gültig bis 15.10.2026“; die Zahl der Tage kommt aus den Daten.- Die Fußzeile ist ein Chromium-Footer-Template mit Registergericht, Geschäftsführung, USt-IdNr. und Bankverbindung sowie
pageNumberundtotalPages. .lines tr { break-inside: avoid }verhindert, dass eine Position zerschnitten wird, wenn ein langes Angebot auf eine zweite Seite läuft.
Verwendete Helfer
Vorlagenordner
<p class="sender">{{ company.name }} · {{ company.street }} · {{ company.city }}</p>
<address class="recipient">
<strong>{{ customer.name }}</strong><br>
{{ customer.contact }}<br>
{{ customer.street }}<br>
{{ customer.city }}
</address>
<table class="facts">
<tr><td>Angebot</td><td>{{ quote.number }}</td></tr>
<tr><td>Datum</td><td>{{ quote.date | date('dd.MM.yyyy') }}</td></tr>
<tr><td>Gültig bis</td><td>{{ quote.date | dateAdd(quote.valid_days, 'days') | date('dd.MM.yyyy') }}</td></tr>
<tr><td>Kundennummer</td><td>{{ customer.number }}</td></tr>
</table>
<h1>Angebot {{ quote.number }}</h1>
<p>Guten Tag {{ customer.contact }},<br>vielen Dank für Ihre Anfrage. Gern bieten wir Ihnen an:</p>
<table class="lines">
<thead>
<tr><th>Pos.</th><th>Leistung</th><th class="num">Menge</th><th class="num">Einzelpreis</th><th class="num">Gesamt</th></tr>
</thead>
<tbody>
{% for line in quote.lines %}
<tr>
<td>{{ loop.index }}</td>
<td>{{ line.description }}{% if line.optional %} <span class="muted">(optional, nicht in der Summe)</span>{% endif %}</td>
<td class="num">{{ line.qty | number(0) }} {{ line.unit }}</td>
<td class="num">{{ line.price | money }}</td>
<td class="num">{{ line.total | money }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% set net = quote.lines | where('optional', false) | sum('total') %}
{% set discount = net * quote.discount_percent / 100 %}
{% set vat = (net - discount) * quote.vat_rate / 100 %}
<table class="totals">
<tr><td>Zwischensumme</td><td class="num">{{ net | money }}</td></tr>
<tr><td>Rabatt {{ quote.discount_percent }} %</td><td class="num">−{{ discount | money }}</td></tr>
<tr><td>USt. {{ quote.vat_rate }} %</td><td class="num">{{ vat | money }}</td></tr>
<tr class="grand"><td>Angebotssumme</td><td class="num">{{ (net - discount + vat) | money }}</td></tr>
</table>
<p>{{ quote.terms }}</p>
<p>Mit freundlichen Grüßen<br>{{ company.director }}</p>body { font-family: 'Inter', sans-serif; font-size: 9.5pt; line-height: 1.45; color: #1e293b; }
.sender {
display: inline-block;
margin: 10mm 0 3mm;
padding-bottom: 1mm;
border-bottom: 1px solid #cbd5e1;
font-size: 7pt;
color: #64748b;
}
.recipient { min-height: 27mm; font-style: normal; line-height: 1.5; }
.facts { float: right; margin-top: -27mm; font-size: 8.5pt; color: #475569; }
.facts td { padding: 0.4mm 0 0.4mm 5mm; }
.facts td:last-child { text-align: right; color: #1e293b; }
h1 { clear: both; margin: 14mm 0 4mm; font-size: 16pt; color: #312e81; }
table.lines { width: 100%; margin-top: 6mm; border-collapse: collapse; }
.lines th {
padding: 2mm 1.5mm;
border-bottom: 1.5px solid #1e293b;
text-align: left;
font-size: 7.5pt;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #64748b;
}
.lines td { padding: 2.3mm 1.5mm; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.lines tr { break-inside: avoid; }
.num { text-align: right !important; white-space: nowrap; }
.totals { width: 78mm; margin: 5mm 0 0 auto; border-collapse: collapse; }
.totals td { padding: 1.2mm 1.5mm; }
.totals .grand td { border-top: 1.5px solid #1e293b; font-weight: 700; font-size: 11pt; }
.muted { color: #64748b; }<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"><div style="box-sizing:border-box;width:100%;display:flex;justify-content:space-between;gap:6mm;padding:0 18mm;font-size:7px;line-height:1.5;color:#555">
<span>{{ company.name }} · {{ company.street }} · {{ company.city }}<br>{{ company.register }} · Geschäftsführung: {{ company.director }}</span>
<span>USt-IdNr. {{ company.vat_id }}<br>IBAN {{ company.iban }} · BIC {{ company.bic }}</span>
<span style="white-space:nowrap">Seite <span class="pageNumber"></span> von <span class="totalPages"></span></span>
</div>{
"paper": {
"format": "A4"
},
"margin": {
"top": "20mm",
"right": "18mm",
"bottom": "26mm",
"left": "22mm"
},
"locale": "de-DE",
"timezone": "Europe/Berlin",
"currency": "EUR",
"pdf": {
"metadata": {
"title": "Angebot {{ quote.number }}"
}
},
"footer": {
"height": "16mm"
}
}{
"company": {
"name": "Fennlor Studio GmbH",
"street": "Musterstraße 1",
"city": "12345 Musterstadt",
"phone": "+49 000 0000000",
"email": "hallo@fennlor.example",
"iban": "DE36000000000000000000",
"bic": "XXXXDEXXXXX",
"vat_id": "DE000000000",
"register": "Amtsgericht Musterstadt, HRB 00000",
"director": "Erika Mustermann"
},
"customer": {
"name": "Olvarest GmbH",
"contact": "Max Mustermann",
"street": "Beispielweg 2",
"city": "54321 Beispielstadt",
"number": "K-10482"
},
"quote": {
"number": "AN-2026-031",
"date": "2026-09-15",
"valid_days": 30,
"discount_percent": 5,
"vat_rate": 19,
"terms": "Zahlbar 14 Tage nach Rechnungsstellung ohne Abzug. Die Umsetzung beginnt zwei Wochen nach Auftragserteilung.",
"lines": [
{
"description": "Konzeption und Workshop",
"qty": 2,
"unit": "Tage",
"price": 1200,
"total": 2400,
"optional": false
},
{
"description": "Umsetzung Kundenportal",
"qty": 15,
"unit": "Tage",
"price": 980,
"total": 14700,
"optional": false
},
{
"description": "Wartungsvertrag, 12 Monate",
"qty": 12,
"unit": "Monate",
"price": 240,
"total": 2880,
"optional": true
}
]
}
}Über die API rendern
Speichern Sie die Beispieldaten als data.json und senden Sie sie mit dem Namen der Vorlage. TypeScript und Python nutzen die SDKs; jede andere Sprache schickt dasselbe JSON mit ihrer Standardbibliothek an die REST-API. Renderings mit einem Schlüssel, der mit ff_test_ beginnt, werden nicht gezählt; im Free-Tarif tragen sie ein kleines Wasserzeichen.
jq '{template: "angebot", data: ., filename: "angebot-AN-2026-031.pdf"}' data.json \
| curl https://api-eu.formfeed.dev/v1/renders \
-H "Authorization: Bearer ff_test_..." \
-H "Content-Type: application/json" \
--data-binary @-import { Formfeed } from '@formfeed/sdk';
import data from './data.json' with { type: 'json' };
const formfeed = new Formfeed({ apiKey: process.env.FORMFEED_API_KEY! });
const render = await formfeed.renders.create({
template: 'angebot',
data,
filename: 'angebot-AN-2026-031.pdf',
});
console.log(render.status, render.download_url);import json
import os
from formfeed import Formfeed
formfeed = Formfeed(api_key=os.environ["FORMFEED_API_KEY"])
with open("data.json", encoding="utf-8") as file:
data = json.load(file)
render = formfeed.renders.create(
template="angebot",
data=data,
filename="angebot-AN-2026-031.pdf",
)
print(render.status, render.download_url)<?php
$body = [
'template' => 'angebot',
'data' => json_decode(file_get_contents('data.json'), true),
'filename' => 'angebot-AN-2026-031.pdf',
];
$curl = curl_init('https://api-eu.formfeed.dev/v1/renders');
curl_setopt_array($curl, [
CURLOPT_POST => true,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HTTPHEADER => [
'Authorization: Bearer ' . getenv('FORMFEED_API_KEY'),
'Content-Type: application/json',
],
CURLOPT_POSTFIELDS => json_encode($body),
]);
$render = json_decode(curl_exec($curl), true);
echo $render['status'], ' ', $render['download_url'], PHP_EOL;package main
import (
"bytes"
"encoding/json"
"fmt"
"net/http"
"os"
)
func main() {
data, err := os.ReadFile("data.json")
if err != nil {
panic(err)
}
body, _ := json.Marshal(map[string]any{
"template": "angebot",
"data": json.RawMessage(data),
"filename": "angebot-AN-2026-031.pdf",
})
request, _ := http.NewRequest("POST", "https://api-eu.formfeed.dev/v1/renders", bytes.NewReader(body))
request.Header.Set("Authorization", "Bearer "+os.Getenv("FORMFEED_API_KEY"))
request.Header.Set("Content-Type", "application/json")
response, err := http.DefaultClient.Do(request)
if err != nil {
panic(err)
}
defer response.Body.Close()
var render struct {
Status string `json:"status"`
DownloadURL string `json:"download_url"`
}
json.NewDecoder(response.Body).Decode(&render)
fmt.Println(render.Status, render.DownloadURL)
}using System.Net.Http.Headers;
using System.Net.Http.Json;
using System.Text.Json;
var body = new
{
template = "angebot",
data = JsonDocument.Parse(File.ReadAllText("data.json")).RootElement,
filename = "angebot-AN-2026-031.pdf",
};
using var http = new HttpClient();
http.DefaultRequestHeaders.Authorization =
new AuthenticationHeaderValue("Bearer", Environment.GetEnvironmentVariable("FORMFEED_API_KEY"));
var response = await http.PostAsJsonAsync("https://api-eu.formfeed.dev/v1/renders", body);
var render = await response.Content.ReadFromJsonAsync<JsonElement>();
Console.WriteLine($"{render.GetProperty("status")} {render.GetProperty("download_url")}");import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import java.nio.file.Files;
import java.nio.file.Path;
public class Render {
public static void main(String[] args) throws Exception {
String data = Files.readString(Path.of("data.json"));
String body = """
{
"template": "angebot",
"filename": "angebot-AN-2026-031.pdf",
"data": %s
}
""".formatted(data);
HttpRequest request = HttpRequest.newBuilder(URI.create("https://api-eu.formfeed.dev/v1/renders"))
.header("Authorization", "Bearer " + System.getenv("FORMFEED_API_KEY"))
.header("Content-Type", "application/json")
.POST(HttpRequest.BodyPublishers.ofString(body))
.build();
HttpResponse<String> response = HttpClient.newHttpClient().send(request, HttpResponse.BodyHandlers.ofString());
System.out.println(response.body()); // status, download_url, page_count, units …
}
}require "json"
require "net/http"
body = {
template: "angebot",
data: JSON.parse(File.read("data.json")),
filename: "angebot-AN-2026-031.pdf",
}
response = Net::HTTP.post(
URI("https://api-eu.formfeed.dev/v1/renders"),
JSON.generate(body),
"Authorization" => "Bearer #{ENV.fetch("FORMFEED_API_KEY")}",
"Content-Type" => "application/json"
)
render = JSON.parse(response.body)
puts render["status"], render["download_url"]Heute mit dem Rendern beginnen
Der kostenlose Plan enthält 100 Einheiten im Monat und kostenlose Testrenderings. Wechseln Sie den Plan, wenn Sie mehr brauchen.