Zum Inhalt springen

LiquidPDF

Angebot als Entwurf markiert

Die Vorlage weiß nichts von der Markierung: post.watermark legt DRAFT nach dem Rendern über jede Seite, geprüfter Entwurf und endgültiges Angebot kommen also aus derselben Vorlage und denselben Daten. Der Text richtet sich nach der Seitendiagonale und läuft von links unten nach rechts oben. Eine halbe Einheit zusätzlich zum Rendering; /pdf/watermark markiert ein früher gerendertes PDF.

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

Gerendertes Ergebnis

Gerendertes Ergebnis: Angebot als Entwurf markiert
PDF · 1 Seite · 74 KB ↓ herunterladen

Was dieses Beispiel zeigt

  • Die Vorlage enthält kein Wasserzeichen: post.watermark legt den Text nach dem Rendern über jede Seite, und ohne die Angabe entsteht das saubere Angebot.
  • Der Text richtet sich nach der Seitendiagonale und läuft von links unten nach rechts oben; color, opacity und rotation ändern das.
  • Liquid übergibt Helfer-Argumente nach einem Doppelpunkt: dateAdd: 30, "days" setzt die Gültigkeit, und money gibt Pfund aus, weil die Währung der Vorlage GBP ist.
  • Ein früher gerendertes PDF wird über /pdf/watermark markiert, ohne es erneut zu rendern.
  • Post-Processing gehört zum Starter-Plan und darüber, auch mit einem Test-Schlüssel; mit einem Live-Schlüssel kostet jeder Schritt eine halbe Einheit zusätzlich zum Rendering.

Verwendete Helfer

Vorlagenordner

templates/quote/template.htmlLiquid
<header>
  <p class="brand">{{ company.name }}</p>
  <p class="muted">{{ company.street }} · {{ company.city }}</p>
</header>

<h1>Quote {{ quote.number }}</h1>
<p class="muted">
  For {{ customer.name }} · issued {{ quote.date | date: "d MMMM yyyy" }} ·
  valid until {{ quote.date | dateAdd: 30, "days" | date: "d MMMM yyyy" }}
</p>

<table>
  <thead>
    <tr><th>Item</th><th class="num">Qty</th><th class="num">Rate</th><th class="num">Amount</th></tr>
  </thead>
  <tbody>
    {% for line in quote.lines %}
    <tr>
      <td>{{ line.description }}</td>
      <td class="num">{{ line.qty }}</td>
      <td class="num">{{ line.price | money }}</td>
      <td class="num">{{ line.total | money }}</td>
    </tr>
    {% endfor %}
  </tbody>
  <tfoot>
    <tr><td colspan="3">Total</td><td class="num">{{ quote.lines | sum: "total" | money }}</td></tr>
  </tfoot>
</table>

<p class="notes">{{ quote.notes }}</p>
templates/quote/style.cssCSS
body { font-family: 'Inter', sans-serif; font-size: 10pt; color: #1e293b; }
header { padding-bottom: 6mm; border-bottom: 1px solid #e2e8f0; }
.brand { margin: 0; font-size: 14pt; font-weight: 700; color: #0f766e; }
.muted { margin: 1mm 0 0; color: #64748b; }
h1 { margin: 14mm 0 2mm; font-size: 22pt; }
table { width: 100%; margin-top: 10mm; border-collapse: collapse; }
th { padding: 2mm 1.5mm; border-bottom: 1.5px solid #1e293b; text-align: left; font-size: 8pt; text-transform: uppercase; color: #64748b; }
td { padding: 2.5mm 1.5mm; border-bottom: 1px solid #e2e8f0; }
tfoot td { border-top: 1.5px solid #1e293b; border-bottom: 0; font-weight: 700; font-size: 12pt; }
.num { text-align: right !important; white-space: nowrap; }
.notes { margin-top: 10mm; font-size: 8.5pt; color: #64748b; }
templates/quote/head.htmlHTML
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
templates/quote/settings.jsonJSON
{
  "pdf": {
    "metadata": {
      "title": "Quote {{ quote.number }}"
    }
  },
  "paper": {
    "format": "A4"
  },
  "margin": {
    "top": "22mm",
    "right": "20mm",
    "bottom": "22mm",
    "left": "20mm"
  },
  "locale": "en-GB",
  "currency": "GBP"
}
templates/quote/data/default.jsonJSON
{
  "company": {
    "name": "Fennlor Studio Ltd",
    "street": "1 Example Street",
    "city": "Exampletown"
  },
  "customer": {
    "name": "Olvarest Ltd"
  },
  "quote": {
    "number": "Q-2026-017",
    "date": "2026-09-10",
    "lines": [
      {
        "description": "Discovery workshop",
        "qty": 2,
        "price": 950,
        "total": 1900
      },
      {
        "description": "Design system",
        "qty": 1,
        "price": 6400,
        "total": 6400
      },
      {
        "description": "Front-end build (days)",
        "qty": 12,
        "price": 720,
        "total": 8640
      }
    ],
    "notes": "Prices exclude VAT. Travel is billed at cost."
  }
}

Ü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. Post-Processing setzt den Starter-Plan oder höher voraus: Der Free-Plan antwortet mit 403, auch bei einem Test-Schlüssel. Renderings mit einem Schlüssel, der mit ff_test_ beginnt, werden nicht gezählt.

render.shShell
jq '{template: "quote", data: ., post: {watermark: {text: "DRAFT"}}}' data.json \
  | curl https://api-eu.formfeed.dev/v1/renders \
      -H "Authorization: Bearer ff_live_..." \
      -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: 'quote',
  data,
  post: {
    watermark: { text: 'DRAFT' },
  },
});
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="quote",
    data=data,
    post={
        "watermark": {"text": "DRAFT"},
    },
)
print(render.status, render.download_url)
render.phpPHP
<?php
$body = [
    'template' => 'quote',
    'data' => json_decode(file_get_contents('data.json'), true),
    'post' => [
        'watermark' => ['text' => 'DRAFT'],
    ],
];

$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": "quote",
		"data":     json.RawMessage(data),
		"post": map[string]any{
			"watermark": map[string]any{"text": "DRAFT"},
		},
	})

	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 = "quote",
    data = JsonDocument.Parse(File.ReadAllText("data.json")).RootElement,
    post = new {
        watermark = new { text = "DRAFT" },
    },
};

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": "quote",
          "post": {"watermark":{"text":"DRAFT"}},
          "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: "quote",
  data: JSON.parse(File.read("data.json")),
  post: {
    watermark: { text: "DRAFT" },
  },
}

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

TypeScript
// mark a PDF you already rendered, without rendering it again
const marked = await formfeed.pdf.watermark(render, {
  text: 'SUPERSEDED',
  color: '#b91c1c',
  opacity: 0.15,
});

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.