Comment les modèles, les pages, les sections, les données et la configuration fonctionnent ensemble pour créer des PDF.
6 minutes de lecture·6 rubriques
Sur cette page
Ces concepts forment un flux de création PDF : créer un modèle, le configurer, fournir des données et restituer le document. Vous pouvez suivre notre flux de travail standard ci-dessous :
Commencez avec un modèle, des pages et des sections
01{{props.brand}}tembuilder{{props.title}}DOCUMENTATION{{params.subtitle}}Tembuilder · PDF
Pour créer un PDF dans Tembuilder, commencez par organiser votre contenu dans un modèle. La structure du document comprend les parties suivantes :
Modèle : Définit le contenu et la présentation de l'ensemble du document et contient une ou plusieurs pages.
Page : Organise le contenu dans le modèle. Chaque page contient des sections.
Section : Un bloc de contenu avec son propre HTML/CSS, afin que vous puissiez éditer chaque partie indépendamment.
Mise en page : Définit l'ordre des pages, les sections appartenant à chaque page et l'ordre des sections dans une page.
Une fois la structure prête, utilisez Global pour donner au document un style cohérent.
Définissez le style partagé avec Global
Global ↙ ↘
tembuilderDocument01
RÉSUMÉTembuilder
tembuilderDocument02
RÉSUMÉTembuilder
Mondial → local
Une fois la structure prête, utilisez Global pour définir une présentation partagée pour l'ensemble du modèle. Les pages héritent de ces paramètres pour maintenir la cohérence du document :
Polices : Déclarez les polices utilisées dans le document et leur ordre de préférence.
Typographie : Définissez la taille de police par défaut, la hauteur des lignes, l'espacement des lettres, l'alignement du texte et la couleur du texte.
Marges de contenu : Définissez les marges supérieure, inférieure, gauche et droite, avec des marges en miroir pour les feuilles paires et impaires si nécessaire.
Arrière-plan de la page : Définissez une couleur ou une image d'arrière-plan, y compris la taille, la position et le comportement de répétition de l'image.
En-têtes et pieds de page : Définissez le contenu partagé en haut et en bas des pages, avec des marges et des arrière-plans pour chaque zone.
Les polices, la typographie et les marges affectent le retour à la ligne et la pagination. Le comportement des sauts pour chaque section est configuré séparément dans les paramètres de pagination.
Une page peut activer sa propre marge ou son propre arrière-plan si nécessaire. Une section peut également avoir son propre props ; ceux-ci ne sont disponibles que dans cette section.
Une fois la structure et le style prêts, l'étape suivante consiste à séparer les valeurs stockées dans le modèle des données fournies pour chaque PDF.
Remplissez le contenu avec props et les paramètres
PropsEnregistré dans le modèletitle: "Document"
ParametersFourni lors du rendu
→
tembuilder
{{props.title}}Document
CONTENU{{params.content}}Contenu Tembuilder
Données → contenu
Selon la manière dont vous concevez vos données, vous pouvez choisir l'une des deux approches suivantes :
Props (propriétés) : Stockez les valeurs dans le modèle, adaptées aux étiquettes de titre ou au contenu réutilisé dans les rendus.
Params (paramètres) : Fournissez des données pour chaque rendu, adaptées au contenu qui change d'un document à l'autre. Les valeurs peuvent être du texte, des nombres, un objet ou une liste.
Le moteur remplit le HTML/CSS de chaque section avec ces valeurs. Un modèle peut être réutilisé avec différentes entrées ; les variantes peuvent changer props ou la disposition pour une autre conception. Différentes données peuvent également produire un contenu plus long, qui doit ensuite être disposé dans la zone de la page.
La configuration définit l'espace disponible
← Marges des pages →
tembuilderDocument
Le contenu circule à l'intérieur de la zone de page disponible.
Marges → zone de contenu
Choisissez le format de papier du document et définissez les marges pour définir sa zone de contenu. Le contour en pointillés dans l'illustration marque l'espace disponible une fois les marges appliquées.
Format de papier : Choisissez parmi les formats pris en charge : A0, A1, A2, A3, A4, A5, A6, US Letter et Legal.
Marges de contenu : Définissez des valeurs individuelles pour les bords supérieur, inférieur, gauche et droit. Utilisez des marges Global partagées ou configurez des marges distinctes pour chaque page.
Présentation : Les polices, la taille des caractères, la hauteur de ligne et la section CSS déterminent la manière dont le contenu s'intègre dans la zone configurée.
Le format du papier et les marges déterminent ensemble l'espace disponible pour le contenu. Lorsque le contenu ne tient plus sur une feuille, les paramètres de pagination déterminent la manière dont il est divisé ou déplacé vers la feuille suivante.
Paginer le document le plus long
tembuilder
01
02
03
04
05
tembuilder
tembuilder
RÉSUMÉRésuméContenu continu
Contenu continu
Section suivante
Une page → plusieurs feuilles
Une page de modèle regroupe le contenu qui peut s'étendre sur plusieurs feuilles PDF lors du rendu. Les en-têtes et les pieds de page se répètent sur ces feuilles, tandis que les sections continuent dans l'ordre de mise en page.
Dans le Config d'une section, combinez le paramètre de maintien avec une option de saut de page avant ou après la section :
Conserver ensemble : Lorsque cette option est activée, préférez conserver la section entière sur une seule feuille. Si l'espace restant est insuffisant mais que la section tient sur une feuille entière, déplacez-la vers la feuille suivante. Lorsqu'il est désactivé, le contenu peut être réparti sur plusieurs feuilles.
Aucun : Ne forcez pas de pause avant ou après la section ; le contenu continue dans l'espace disponible.
Avant : Commencez la section sur une nouvelle feuille lorsque le contenu la précède dans la même page de modèle.
Après : Déplacez la section suivante de la même page de modèle vers une nouvelle feuille.
Les deux : Commencez la section sur une nouvelle feuille et déplacez la section suivante vers une autre feuille.
Par exemple, activez Garder ensemble pour un bloc de signature court afin d'éviter de le diviser, tout en permettant à un long tableau de s'étendre sur des feuilles. Ces paramètres ne réduisent pas le contenu ; une section surdimensionnée peut toujours dépasser l'espace disponible sur une feuille.
Rassemblez-le en un seul rendu
JSON{ data }
↓
HTML/CSS<page> tembuilder </page>
PDF
tembuilderDocument01
HTML → PDF
Une fois la structure, la présentation et les données prêtes, Tembuilder les combine pour créer un PDF dans les étapes suivantes :
Choisissez le modèle : Utilisez le modèle et la variante que vous souhaitez restituer.
Résolvez la conception : Déterminez l'ordre des pages et des sections, props et la configuration applicable.
Remplissez les données : Insérez les paramètres fournis pour ce rendu dans le contenu du modèle.
Construisez le document : Assemblez les HTML/CSS des pièces dans un document complet.
Paginez et exportez : Divisez le contenu en feuilles en utilisant le format de papier, les marges et les règles de rupture, puis générez le fichier PDF.
Lors de la conception, l'aperçu en direct vous aide à inspecter le contenu et la mise en page que vous modifiez. Pour vérifier le nombre réel de feuilles, les en-têtes, les pieds de page et les sauts de page, affichez le résultat dans l'onglet PDF.