Wie Vorlagen, Seiten, Abschnitte, Daten und Konfiguration zusammenarbeiten, um PDFs zu erstellen.
5 Minuten Lesezeit·6 Abschnitte
Auf dieser Seite
Diese Konzepte bilden einen PDF-Erstellungsablauf: Vorlage erstellen, konfigurieren, Daten bereitstellen und das Dokument rendern. Sie können unserem Standard-Workflow unten folgen:
Beginnen Sie mit einer Vorlage, Seiten und Abschnitten
01{{props.brand}}tembuilder{{props.title}}DOKUMENT{{params.subtitle}}Tembuilder · PDF
Um ein PDF in Tembuilder zu erstellen, organisieren Sie zunächst Ihre Inhalte in einer Vorlage. Die Dokumentenstruktur besteht aus folgenden Teilen:
Vorlage: Definiert den Inhalt und die Präsentation des gesamten Dokuments und enthält eine oder mehrere Seiten.
Seite: Organisiert Inhalte innerhalb der Vorlage. Jede Seite enthält Abschnitte.
Abschnitt: Ein Inhaltsblock mit eigenem HTML/CSS, sodass Sie jeden Teil unabhängig bearbeiten können.
Layout: Definiert die Seitenreihenfolge, welche Abschnitte zu jeder Seite gehören und die Reihenfolge der Abschnitte innerhalb einer Seite.
Sobald die Struktur fertig ist, verwenden Sie Global, um dem Dokument einen einheitlichen Stil zu verleihen.
Legen Sie den gemeinsamen Stil mit Global fest
Global ↙ ↘
tembuilderDokument01
ZUSAMMENFASSUNGTembuilder
tembuilderDokument02
ZUSAMMENFASSUNGTembuilder
Global → lokal
Sobald die Struktur fertig ist, verwenden Sie Global, um eine gemeinsame Präsentation für die gesamte Vorlage festzulegen. Seiten erben diese Einstellungen, um das Dokument konsistent zu halten:
Schriftarten: Deklarieren Sie die im Dokument verwendeten Schriftarten und deren bevorzugte Reihenfolge.
Typografie: Legen Sie die Standardschriftgröße, Zeilenhöhe, den Buchstabenabstand, die Textausrichtung und die Textfarbe fest.
Inhaltsränder: Legen Sie den oberen, unteren, linken und rechten Rand fest, bei Bedarf mit gespiegelten Rändern für ungerade und gerade Blätter.
Seitenhintergrund: Legen Sie eine Hintergrundfarbe oder ein Bild fest, einschließlich Bildgröße, Position und Wiederholungsverhalten.
Kopf- und Fußzeilen: Legen Sie freigegebene Inhalte oben und unten auf den Seiten fest, mit Rändern und Hintergründen für jeden Bereich.
Schriftarten, Typografie und Ränder wirken sich auf Umbruch und Paginierung aus. Das Umbruchverhalten für jeden Abschnitt wird in den Paginierungseinstellungen separat konfiguriert.
Eine Seite kann bei Bedarf einen eigenen Rand oder Hintergrund aktivieren. Ein Abschnitt kann auch einen eigenen props haben; Diese sind nur in diesem Abschnitt verfügbar.
Wenn Struktur und Stil bereit sind, besteht der nächste Schritt darin, die in der Vorlage gespeicherten Werte von den für jedes PDF bereitgestellten Daten zu trennen.
Füllen Sie den Inhalt mit props und Parametern
PropsIn Vorlage gespeicherttitle: "Dokument"
ParametersWird beim Rendern geliefert
→
tembuilder
{{props.title}}Dokument
INHALT{{params.content}}Tembuilder-Inhalte
Daten → Inhalt
Je nachdem, wie Sie Ihre Daten gestalten, können Sie einen von zwei Ansätzen wählen:
Props (Eigenschaften): Werte in der Vorlage speichern, geeignet für Überschriftenbeschriftungen oder Inhalte, die bei Renderings wiederverwendet werden.
Params (Parameter): Geben Sie Daten für jedes Rendering an, geeignet für Inhalte, die sich von einem Dokument zum anderen ändern. Werte können Text, Zahlen, ein Objekt oder eine Liste sein.
Die Engine füllt die HTML/CSS jedes Abschnitts mit diesen Werten. Eine Vorlage kann mit verschiedenen Eingaben wiederverwendet werden; Varianten können props oder Layout für ein anderes Design ändern. Durch unterschiedliche Daten können auch längere Inhalte entstehen, die dann innerhalb des Seitenbereichs angeordnet werden müssen.
Konfiguration legt den verfügbaren Platz fest
← Seitenränder →
tembuilderDokument
Der Inhalt fließt innerhalb des verfügbaren Seitenbereichs.
Ränder → Inhaltsbereich
Wählen Sie das Papierformat des Dokuments und legen Sie Ränder fest, um den Inhaltsbereich zu definieren. Der gestrichelte Umriss in der Abbildung markiert den verfügbaren Platz nach dem Anwenden von Rändern.
Papierformat: Wählen Sie aus den unterstützten Formaten: A0, A1, A2, A3, A4, A5, A6, US Letter und Legal.
Inhaltsränder: Legen Sie individuelle Werte für den oberen, unteren, linken und rechten Rand fest. Verwenden Sie gemeinsame Global-Ränder oder konfigurieren Sie separate Ränder für jede Seite.
Darstellung: Schriftarten, Schriftgröße, Zeilenhöhe und Abschnitt CSS bestimmen, wie der Inhalt in den konfigurierten Bereich passt.
Papiergröße und Ränder bestimmen zusammen den für Inhalte verfügbaren Platz. Wenn Inhalte nicht mehr auf ein Blatt passen, bestimmen die Paginierungseinstellungen, wie sie geteilt oder auf das nächste Blatt verschoben werden.
Paginieren Sie das längere Dokument
tembuilder
01
02
03
04
05
tembuilder
tembuilder
ZUSAMMENFASSUNGZusammenfassungFortsetzung des Inhalts
Fortsetzung des Inhalts
Nächster Abschnitt
Eine Seite → mehrere Blätter
Eine Vorlagenseite gruppiert Inhalte, die sich beim Rendern über mehrere PDF-Blätter erstrecken können. Kopf- und Fußzeilen wiederholen sich auf diesen Blättern, während die Abschnitte in der Layoutreihenfolge fortgeführt werden.
Kombinieren Sie im Config eines Abschnitts die Keep-Together-Einstellung mit einer Seitenumbruchoption vor oder nach dem Abschnitt:
Zusammenhalten: Wenn diese Option aktiviert ist, sollten Sie lieber den gesamten Abschnitt auf einem Blatt behalten. Wenn der verbleibende Platz nicht ausreicht, der Abschnitt aber auf ein ganzes Blatt passt, verschieben Sie ihn auf das nächste Blatt. Wenn diese Option deaktiviert ist, wird der Inhalt möglicherweise auf mehrere Blätter aufgeteilt.
Keine: Erzwingen Sie keine Pause vor oder nach dem Abschnitt; Der Inhalt wird im verfügbaren Platz fortgesetzt.
Vorher: Beginnen Sie den Abschnitt auf einem neuen Blatt, wenn der Inhalt ihm innerhalb derselben Vorlagenseite vorausgeht.
Nachher: Verschieben Sie den nächsten Abschnitt innerhalb derselben Vorlagenseite auf ein neues Blatt.
Beide: Beginnen Sie den Abschnitt auf einem neuen Blatt und verschieben Sie den folgenden Abschnitt auf ein anderes Blatt.
Aktivieren Sie beispielsweise „Zusammenhalten“ für einen kurzen Signaturblock, um eine Aufteilung zu vermeiden, während eine lange Tabelle sich über mehrere Blätter erstrecken kann. Durch diese Einstellungen wird der Inhalt nicht verkleinert; Ein übergroßer Abschnitt kann immer noch den verfügbaren Platz auf einem Blatt überschreiten.
Bringen Sie es in einem Render zusammen
JSON{ data }
↓
HTML/CSS<page> tembuilder </page>
PDF
tembuilderDokument01
HTML → PDF
Sobald Struktur, Präsentation und Daten fertig sind, kombiniert Tembuilder diese in den folgenden Schritten zu einem PDF:
Wählen Sie die Vorlage: Verwenden Sie die Vorlage und Variante, die Sie rendern möchten.
Auflösen des Designs: Bestimmen Sie die Seiten- und Abschnittsreihenfolge, props und die anwendbare Konfiguration.
Geben Sie die Daten ein: Fügen Sie die für dieses Rendering bereitgestellten Parameter in den Vorlageninhalt ein.
Erstellen Sie das Dokument: Fügen Sie die Teile HTML/CSS zu einem vollständigen Dokument zusammen.
Paginieren und exportieren: Teilen Sie den Inhalt anhand des Papierformats, der Ränder und der Umbruchregeln in Blätter auf und generieren Sie dann die PDF-Datei.
Während des Entwerfens hilft Ihnen die Live-Vorschau dabei, den Inhalt und das Layout zu überprüfen, die Sie bearbeiten. Um die tatsächliche Blattanzahl, Kopf- und Fußzeilen sowie Seitenumbrüche zu überprüfen, sehen Sie sich das Ergebnis auf der Registerkarte PDF an.