HandlebarsPDF

Stundenzettel mit Saldo und Projektübersicht

Ein Wochen-Stundenzettel in Handlebars: Wochentage auf Deutsch formatiert, die gearbeiteten Stunden summiert und mit subtract dem Soll gegenübergestellt, und dieselben Einträge für die Übersicht nach Projekt gruppiert. Zwei Unterschriftszeilen bleiben am Seitenende zusammen.

Diese Vorlage verwenden Die Anfrage in acht Sprachen ↓

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

{{date day "EEE, dd.MM."}} gibt den Wochentag auf Deutsch aus (Mo., 14.09.), weil die Locale der Vorlage de-DE ist.
Der Saldo ist (subtract (sum entries "hours") sheet.target_hours): 40,5 gearbeitete Stunden gegen 40 ergeben 0,50 h.
{{#each (groupBy entries "project")}} nutzt dieselben Einträge für die Projektübersicht, mit sum items "hours" in jeder Gruppe.
Beginn, Ende und Pause stehen da, wie sie erfasst wurden; die Stunden je Tag kommen aus der Zeiterfassung, die ihre eigenen Rundungsregeln kennt.
Ein Batch rendert die Woche des ganzen Teams, mit Personalnummer und Kalenderwoche in jedem Dateinamen.

Verwendete Helfer

Vorlagenordner

template.html

templates/stundenzettel/template.htmlHandlebars

<header>
  <div>
    <h1>Stundenzettel</h1>
    <p class="muted">Kalenderwoche {{sheet.week}} · {{date sheet.from "dd.MM."}} bis {{date sheet.until "dd.MM.yyyy"}}</p>
  </div>
  <p class="who"><strong>{{employee.name}}</strong><br>Personalnr. {{employee.number}}<br>{{company.name}}</p>
</header>

<table class="lines">
  <thead>
    <tr><th>Tag</th><th>Projekt</th><th>Tätigkeit</th><th class="num">Von</th><th class="num">Bis</th><th class="num">Pause</th><th class="num">Stunden</th></tr>
  </thead>
  <tbody>
    {{#each entries}}
    <tr>
      <td>{{date day "EEE, dd.MM."}}</td>
      <td>{{project}}</td>
      <td>{{task}}</td>
      <td class="num">{{from}}</td>
      <td class="num">{{to}}</td>
      <td class="num">{{break_minutes}} min</td>
      <td class="num">{{number hours 2}}</td>
    </tr>
    {{/each}}
  </tbody>
</table>

<table class="totals">
  <tr><td>Gearbeitet</td><td class="num">{{number (sum entries "hours") 2}} h</td></tr>
  <tr><td>Soll</td><td class="num">{{number sheet.target_hours 2}} h</td></tr>
  <tr class="grand"><td>Saldo</td><td class="num">{{number (subtract (sum entries "hours") sheet.target_hours) 2}} h</td></tr>
</table>

<h2>Nach Projekt</h2>
<ul class="projects">
  {{#each (groupBy entries "project")}}
  <li><span>{{key}}</span><strong>{{number (sum items "hours") 2}} h</strong></li>
  {{/each}}
</ul>

<footer>
  <div><span></span>Datum, Unterschrift Mitarbeiter/in</div>
  <div><span></span>Datum, Unterschrift Vorgesetzte/r</div>
</footer>

style.css

templates/stundenzettel/style.cssCSS

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; }
header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 5mm; border-bottom: 1px solid #e2e8f0; }
h1 { margin: 0; clear: none; }
.muted { margin: 1mm 0 0; }
.who { margin: 0; text-align: right; font-size: 9pt; line-height: 1.5; }
h2 { margin: 10mm 0 2mm; font-size: 11pt; }
.projects { margin: 0; padding: 0; list-style: none; width: 78mm; }
.projects li { display: flex; justify-content: space-between; padding: 1.2mm 0; border-bottom: 1px solid #e2e8f0; }
footer { display: flex; gap: 12mm; margin-top: 22mm; break-inside: avoid; font-size: 8pt; color: #64748b; }
footer div { flex: 1; }
footer span { display: block; margin-bottom: 1.5mm; border-top: 1px solid #1e293b; }

head.html

templates/stundenzettel/head.htmlHTML

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">

settings.json

templates/stundenzettel/settings.jsonJSON

{
  "pdf": {
    "metadata": {
      "title": "Stundenzettel"
    }
  },
  "paper": {
    "format": "A4"
  },
  "margin": {
    "top": "18mm",
    "right": "18mm",
    "bottom": "18mm",
    "left": "18mm"
  },
  "locale": "de-DE",
  "timezone": "Europe/Berlin"
}

data.json

templates/stundenzettel/data/default.jsonJSON

{
  "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"
  },
  "employee": {
    "name": "Max Mustermann",
    "number": "E-0417"
  },
  "sheet": {
    "week": 38,
    "from": "2026-09-14",
    "until": "2026-09-18",
    "target_hours": 40
  },
  "entries": [
    {
      "day": "2026-09-14",
      "project": "Kundenportal",
      "task": "Rendering-Pipeline",
      "from": "08:30",
      "to": "17:30",
      "break_minutes": 45,
      "hours": 8.25
    },
    {
      "day": "2026-09-15",
      "project": "Kundenportal",
      "task": "Review und Tests",
      "from": "08:30",
      "to": "17:00",
      "break_minutes": 30,
      "hours": 8
    },
    {
      "day": "2026-09-16",
      "project": "Intern",
      "task": "Teamtag",
      "from": "09:00",
      "to": "16:30",
      "break_minutes": 60,
      "hours": 6.5
    },
    {
      "day": "2026-09-17",
      "project": "Kundenportal",
      "task": "Release",
      "from": "08:00",
      "to": "18:30",
      "break_minutes": 45,
      "hours": 9.75
    },
    {
      "day": "2026-09-18",
      "project": "Wartung",
      "task": "Updates und Monitoring",
      "from": "08:30",
      "to": "17:00",
      "break_minutes": 30,
      "hours": 8
    }
  ]
}

Ü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.

curl

render.shShell

jq '{template: "stundenzettel", data: ., filename: "stundenzettel-E-0417-kw38.pdf"}' data.json \
  | curl https://api-eu.formfeed.dev/v1/renders \
      -H "Authorization: Bearer ff_test_..." \
      -H "Content-Type: application/json" \
      --data-binary @-

TypeScript

render.tsTypeScript

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: 'stundenzettel',
  data,
  filename: 'stundenzettel-E-0417-kw38.pdf',
});
console.log(render.status, render.download_url);

Python

render.pyPython

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="stundenzettel",
    data=data,
    filename="stundenzettel-E-0417-kw38.pdf",
)
print(render.status, render.download_url)

PHP

render.phpPHP

<?php
$body = [
    'template' => 'stundenzettel',
    'data' => json_decode(file_get_contents('data.json'), true),
    'filename' => 'stundenzettel-E-0417-kw38.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;

main.goGo

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": "stundenzettel",
		"data":     json.RawMessage(data),
		"filename": "stundenzettel-E-0417-kw38.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)
}

Program.csC#

using System.Net.Http.Headers;
using System.Net.Http.Json;
using System.Text.Json;

var body = new
{
    template = "stundenzettel",
    data = JsonDocument.Parse(File.ReadAllText("data.json")).RootElement,
    filename = "stundenzettel-E-0417-kw38.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")}");

Java

Render.javaJava

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": "stundenzettel",
          "filename": "stundenzettel-E-0417-kw38.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 …
  }
}

Ruby

render.rbRuby

require "json"
require "net/http"

body = {
  template: "stundenzettel",
  data: JSON.parse(File.read("data.json")),
  filename: "stundenzettel-E-0417-kw38.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"]

Weitere Aufrufe

Batch

TypeScript

// the whole team's week as one job
const job = await formfeed.renders.batch({
  template: 'stundenzettel',
  zip: true,
  items: team.map(({ employee, entries }) => ({
    data: { company, employee, sheet, entries },
    filename: `stundenzettel-${employee.number}-kw${sheet.week}.pdf`,
  })),
});

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.

Diese Vorlage verwenden Dokumentation lesen