Zum Inhalt springen

LiquidPDF

Geschenkgutschein mit Tailwind, als PDF und PNG

Ein Gutschein im Format DIN lang, gestaltet mit Tailwind-Klassen, die beim Rendern kompiliert werden, beliebige Werte wie h-[99mm] eingeschlossen. Das Ablaufdatum liegt über dateAdd drei Jahre nach dem Ausstellungsdatum, die Nachricht erscheint nur, wenn es eine gibt, und dieselbe Vorlage rendert als PNG für die Mail.

Kostenloser Plan, keine Kreditkarte. Sie erhalten eine eigene Kopie im Editor, veröffentlicht und bereit für die API.

Gerendertes Ergebnis

Gerendertes Ergebnis: Geschenkgutschein mit Tailwind, als PDF und PNG
PDF · 1 Seite · 34 KB ↓ herunterladen

Was dieses Beispiel zeigt

  • tailwind: true kompiliert beim Rendern die Klassen, die das Markup verwendet, beliebige Werte wie h-[99mm] und text-[40pt] eingeschlossen; ein Stylesheet gibt es nicht.
  • Die Seite ist 210mm × 99mm (DIN lang) ohne Ränder, der Verlauf reicht also bis zum Rand.
  • voucher.issued | dateAdd: 3, "years" | date: "dd.MM.yyyy" gibt das Ablaufdatum 18.09.2029 aus.
  • {% if voucher.message %} lässt die Nachrichtenzeile weg, wenn es keine gibt, und default: "Sie" spricht einen Gutschein ohne Empfänger an.
  • output: "png" mit settings.image.clipSelector: "main" rendert dieselbe Vorlage als Bild nur des Gutscheins für die Mail; output allein nähme ein Fenster von 1200 × 630 mit dem Gutschein in der Ecke auf. Ohne beides kommt das PDF zum Drucken zurück.

Verwendete Helfer

Vorlagenordner

templates/gutschein/template.htmlLiquid
<main class="flex h-[99mm] w-[210mm] bg-gradient-to-br from-indigo-950 via-indigo-800 to-sky-600 text-white">
  <section class="flex flex-1 flex-col justify-between p-[11mm]">
    <p class="text-[8pt] font-semibold uppercase tracking-[0.25em] text-sky-200">Gutschein · {{ shop.name }}</p>
    <div>
      <p class="text-[40pt] font-bold leading-none">{{ voucher.amount | money }}</p>
      <p class="mt-[3mm] text-[11pt] text-sky-100">für {{ voucher.recipient | default: "Sie" }}</p>
      {% if voucher.message %}<p class="mt-[2mm] max-w-[110mm] text-[9.5pt] italic text-sky-100">„{{ voucher.message }}“</p>{% endif %}
    </div>
    <p class="text-[8pt] text-sky-200">
      Ausgestellt am {{ voucher.issued | date: "dd.MM.yyyy" }} · einlösbar bis {{ voucher.issued | dateAdd: 3, "years" | date: "dd.MM.yyyy" }} · {{ shop.url }}
    </p>
  </section>
  <aside class="flex w-[58mm] flex-col items-center justify-center gap-[3mm] bg-white text-slate-900">
    <img class="h-[34mm] w-[34mm]" src="{{ voucher.redeem_url | qrcode: size: 120 }}" alt="Einlöse-Code">
    <p class="font-mono text-[11pt] font-semibold tracking-widest">{{ voucher.code }}</p>
    <p class="text-[7.5pt] text-slate-500">Code im Warenkorb eingeben</p>
  </aside>
</main>
templates/gutschein/settings.jsonJSON
{
  "pdf": {
    "metadata": {
      "title": "Gutschein"
    }
  },
  "paper": {
    "width": "210mm",
    "height": "99mm"
  },
  "margin": {
    "top": "0",
    "right": "0",
    "bottom": "0",
    "left": "0"
  },
  "tailwind": true,
  "locale": "de-DE",
  "timezone": "Europe/Berlin",
  "currency": "EUR"
}
templates/gutschein/data/default.jsonJSON
{
  "shop": {
    "name": "Fennlor Studio",
    "url": "shop.fennlor.example"
  },
  "voucher": {
    "code": "FF-7K2M-9QXA",
    "amount": 50,
    "recipient": "Erika",
    "message": "Alles Gute zum Geburtstag!",
    "issued": "2026-09-18",
    "redeem_url": "https://shop.fennlor.example/einloesen/FF-7K2M-9QXA"
  }
}

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

render.shShell
jq '{template: "gutschein", data: .}' data.json \
  | curl https://api-eu.formfeed.dev/v1/renders \
      -H "Authorization: Bearer ff_test_..." \
      -H "Content-Type: application/json" \
      --data-binary @-
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: 'gutschein',
  data,
});
console.log(render.status, render.download_url);
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="gutschein",
    data=data,
)
print(render.status, render.download_url)
render.phpPHP
<?php
$body = [
    'template' => 'gutschein',
    'data' => json_decode(file_get_contents('data.json'), true),
];

$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": "gutschein",
		"data":     json.RawMessage(data),
	})

	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 = "gutschein",
    data = JsonDocument.Parse(File.ReadAllText("data.json")).RootElement,
};

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")}");
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": "gutschein",
          "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 …
  }
}
render.rbRuby
require "json"
require "net/http"

body = {
  template: "gutschein",
  data: JSON.parse(File.read("data.json")),
}

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.