Prérequis
- Téléchargez report-template.html et report-data.json ci-dessous. Les données contiennent 60 lignes fictives, dont plusieurs descriptions longues.
- Pour générer le PDF par API, utilisez une clé Templatr et du quota disponible. Le PDF de démonstration peut être consulté sans compte.
1. Définir le papier et les zones à conserver
@page définit une feuille A4 avec 18 mm de marge. Évitez de fixer une hauteur de page sur body : laissez le contenu passer sur la page suivante. Le moteur Templatr respecte les dimensions CSS de @page.
break-inside: avoid sur tr demande de garder une ligne entière. thead répète l’en-tête du tableau. break-after: avoid limite les titres isolés ; break-before: page force l’annexe à commencer sur une nouvelle page.
Une ligne plus haute qu’une page ne peut pas rester entière : réduisez son contenu ou autorisez sa fragmentation. Ne mettez pas break-inside: avoid sur un tableau complet qui doit couvrir plusieurs pages.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{report.title}}</title>
<style>
@page { size: A4; margin: 18mm; }
body { font: 11pt Arial, sans-serif; color: #172033; }
h1 { font-size: 24pt; }
h2 { break-after: avoid; }
table { width: 100%; border-collapse: collapse; }
thead { display: table-header-group; }
th, td { border-bottom: 1px solid #dbe2ea; padding: 3mm; text-align: left; }
tr, .summary { break-inside: avoid; }
td { overflow-wrap: anywhere; }
th:first-child, td:first-child { width: 22mm; white-space: nowrap; }
th:last-child, td:last-child { width: 25mm; white-space: nowrap; }
.appendix { break-before: page; }
</style>
</head>
<body>
<h1>{{report.title}}</h1>
<p>{{report.period}}</p>
<table>
<thead><tr><th>Reference</th><th>Description</th><th>Amount</th></tr></thead>
<tbody>{{ items loop }}<tr><td>{{item.reference}}</td><td>{{item.description}}</td><td>{{item.amount}}</td></tr>{{ end loop }}</tbody>
</table>
<div class="summary"><h2>Summary</h2><p>{{report.summary}}</p></div>
<section class="appendix"><h2>Appendix</h2><p>This section starts on a new page. All values are fictional.</p></section>
</body>
</html>
2. Utiliser des données qui dépassent une page
L’aperçu ci-dessous montre deux lignes ; le fichier téléchargeable en contient 60, assez de lignes pour observer la répétition des colonnes et les sauts de page. Modifiez les descriptions et ajoutez un mot très long pour vérifier overflow-wrap. L’ordre du tableau JSON détermine l’ordre des lignes.
{
"report": {
"title": "Monthly activity report",
"period": "September 2026",
"summary": "60 demonstration rows. All amounts are display values calculated before rendering."
},
"items": [
{
"reference": "DEMO-001",
"description": "Integration review and document layout testing",
"amount": "EUR 25.00"
},
{
"reference": "DEMO-002",
"description": "Integration review and document layout testing",
"amount": "EUR 25.00"
}
]
}3. Générer le rapport
Définissez TEMPLATR_API_KEY, envoyez le modèle, puis remplacez TEMPLATE_ID_FROM_RESPONSE par le template_id reçu. curl envoie le fichier JSON sans modification et enregistre la réponse PDF.
export TEMPLATR_API_KEY='YOUR_API_KEY'
curl --fail-with-body "https://api.templatr.app/upload" \
-H "Authorization: Bearer $TEMPLATR_API_KEY" \
-F "[email protected]" \
-F "name=Example report"
export TEMPLATR_TEMPLATE_ID='TEMPLATE_ID_FROM_RESPONSE'
curl --fail-with-body "https://api.templatr.app/pdf/$TEMPLATR_TEMPLATE_ID?format=pdf" \
-H "Authorization: Bearer $TEMPLATR_API_KEY" \
-H "Content-Type: application/json" \
--data-binary @report-data.json --output report.pdfVérifications et erreurs
- Vérifiez que les références DEMO-001 à DEMO-060 apparaissent une fois chacune, dans le bon ordre.
- Sur les pages intermédiaires, vérifiez les colonnes Reference, Description et Amount et l’absence de chevauchement avec les marges.
- L’annexe doit commencer sur sa propre page. Le nombre total de pages dépend de la police et de la longueur de vos données.
- Si un tableau est coupé horizontalement, réduisez la largeur de ses colonnes ou les contenus non sécables. Pour des fonds absents, gardez les couleurs dans le CSS du modèle ; les arrière-plans sont activés par le moteur.
- Les images distantes et les polices externes peuvent être bloquées. Cet exemple utilise une police système et aucun script, ni ressource réseau.