LiquidPDF

Lieferschein mit Barcode und Empfangsbestätigung

Ein Lieferschein ohne Preise: bestellte gegen gelieferte Mengen, ein Hinweis bei Positionen mit Restmenge, die Nummer als Code-128-Barcode für den Wareneingang und ein Unterschriftsblock, der nie über einen Seitenumbruch läuft. Geschrieben in Liquid.

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

Nirgends Preise: Die Tabelle vergleicht ordered und delivered, und ein Liquid-{% if line.delivered < line.ordered %} ergänzt bei Teillieferungen „Restmenge folgt“.
barcode: type: 'code128', height: 12 zeichnet die Lieferscheinnummer, der Wareneingang bucht also mit dem Scanner.
sum: "delivered" und sum: "ordered" ergeben die Schlusszeile „44 von 48 Einheiten geliefert“.
default: customer.contact greift auf die Kontaktperson zurück, wenn die Lieferung keinen eigenen Empfänger nennt.
Die Empfangsbestätigung hat break-inside: avoid, die Unterschriftszeile landet also nie allein auf einer neuen Seite.

Verwendete Helfer

Vorlagenordner

template.html

templates/lieferschein/template.htmlLiquid

<p class="sender">{{ company.name }} · {{ company.street }} · {{ company.city }}</p>
<address class="recipient">
  <strong>{{ customer.name }}</strong><br>
  {{ delivery.recipient | default: customer.contact }}<br>
  {{ customer.street }}<br>
  {{ customer.city }}
</address>
<table class="facts">
  <tr><td>Lieferschein</td><td>{{ delivery.number }}</td></tr>
  <tr><td>Lieferdatum</td><td>{{ delivery.date | date: "dd.MM.yyyy" }}</td></tr>
  <tr><td>Bestellung</td><td>{{ delivery.order_number }}</td></tr>
  <tr><td>Versand</td><td>{{ delivery.carrier }}, {{ delivery.packages }} Pakete</td></tr>
</table>

<h1>Lieferschein {{ delivery.number }}</h1>
<img class="code" src="{{ delivery.number | barcode: type: 'code128', height: 12 }}" alt="Lieferscheinnummer">

<table class="lines">
  <thead>
    <tr><th>Pos.</th><th>Artikelnr.</th><th>Bezeichnung</th><th class="num">Bestellt</th><th class="num">Geliefert</th></tr>
  </thead>
  <tbody>
    {% for line in delivery.lines %}
    <tr>
      <td>{{ forloop.index }}</td>
      <td>{{ line.sku }}</td>
      <td>{{ line.description }}{% if line.delivered < line.ordered %}<br><span class="muted">Restmenge folgt</span>{% endif %}</td>
      <td class="num">{{ line.ordered | number: 0 }} {{ line.unit }}</td>
      <td class="num">{{ line.delivered | number: 0 }} {{ line.unit }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
<p class="muted">{{ delivery.lines | sum: "delivered" | number: 0 }} von {{ delivery.lines | sum: "ordered" | number: 0 }} Einheiten geliefert.</p>

<section class="receipt">
  <p>Ware vollständig und unbeschädigt erhalten:</p>
  <div><span></span>Datum</div>
  <div><span></span>Unterschrift, Name in Druckbuchstaben</div>
</section>

style.css

templates/lieferschein/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; }
.code { display: block; width: 62mm; margin: 0 0 2mm; }
.receipt { margin-top: 16mm; break-inside: avoid; }
.receipt div { display: inline-block; width: 70mm; margin: 12mm 8mm 0 0; font-size: 8pt; color: #64748b; }
.receipt span { display: block; margin-bottom: 1.5mm; border-top: 1px solid #1e293b; }

head.html

templates/lieferschein/head.htmlHTML

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

footer.html

templates/lieferschein/footer.htmlLiquid

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

settings.json

templates/lieferschein/settings.jsonJSON

{
  "paper": {
    "format": "A4"
  },
  "margin": {
    "top": "20mm",
    "right": "18mm",
    "bottom": "26mm",
    "left": "22mm"
  },
  "locale": "de-DE",
  "timezone": "Europe/Berlin",
  "currency": "EUR",
  "pdf": {
    "metadata": {
      "title": "Lieferschein {{ delivery.number }}"
    }
  },
  "footer": {
    "height": "16mm"
  }
}

data.json

templates/lieferschein/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"
  },
  "customer": {
    "name": "Olvarest GmbH",
    "contact": "Max Mustermann",
    "street": "Beispielweg 2",
    "city": "54321 Beispielstadt",
    "number": "K-10482"
  },
  "delivery": {
    "number": "LS-2026-0117",
    "date": "2026-09-16",
    "order_number": "B-4471",
    "carrier": "Paketdienst",
    "packages": 2,
    "recipient": "Wareneingang, Tor 3",
    "lines": [
      {
        "sku": "FF-1001",
        "description": "Tischleuchte, schwarz",
        "ordered": 12,
        "delivered": 12,
        "unit": "Stk."
      },
      {
        "sku": "FF-2040",
        "description": "Leinenschirm, natur",
        "ordered": 12,
        "delivered": 8,
        "unit": "Stk."
      },
      {
        "sku": "FF-3300",
        "description": "Leuchtmittel E27, warmweiß",
        "ordered": 24,
        "delivered": 24,
        "unit": "Stk."
      }
    ]
  }
}

Ü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: "lieferschein", data: ., filename: "lieferschein-LS-2026-0117.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: 'lieferschein',
  data,
  filename: 'lieferschein-LS-2026-0117.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="lieferschein",
    data=data,
    filename="lieferschein-LS-2026-0117.pdf",
)
print(render.status, render.download_url)

PHP

render.phpPHP

<?php
$body = [
    'template' => 'lieferschein',
    'data' => json_decode(file_get_contents('data.json'), true),
    'filename' => 'lieferschein-LS-2026-0117.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": "lieferschein",
		"data":     json.RawMessage(data),
		"filename": "lieferschein-LS-2026-0117.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 = "lieferschein",
    data = JsonDocument.Parse(File.ReadAllText("data.json")).RootElement,
    filename = "lieferschein-LS-2026-0117.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": "lieferschein",
          "filename": "lieferschein-LS-2026-0117.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: "lieferschein",
  data: JSON.parse(File.read("data.json")),
  filename: "lieferschein-LS-2026-0117.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.

Diese Vorlage verwenden Dokumentation lesen