En-tête et pied de page

Les en-têtes et pieds de page permettent de répéter des informations sur chaque page de votre PDF : un logo, un titre de document, des numéros de page, une date, des mentions légales, etc. PDFMonkey offre trois façons de les ajouter, chacune avec ses compromis. Choisissez la plus simple qui répond à vos besoins.

En-tête et pied de page via les paramètres

L’approche la plus simple. Ouvrez l’onglet Paramètres de votre Template et remplissez les champs d’en-tête et/ou de pied de page. Le contenu est affiché sur chaque page, par-dessus le contenu du document.

Mode basique

Les champs par défaut offrent trois emplacements (gauche, centre, droite) par en-tête et pied de page. Vous pouvez utiliser deux balises spéciales :

• [page] — numéro de la page courante
• [topage] — nombre total de pages

Mode avancé

Passez en mode Avancé pour écrire du HTML personnalisé. Vous obtenez un contrôle total sur la mise en page et pouvez utiliser ces équivalents HTML pour les numéros de page :

<span class="pageNumber"></span>  <!-- numéro de la page courante -->
<span class="totalPages"></span>  <!-- nombre total de pages -->

Vous pouvez également utiliser des données dynamiques (syntaxe Liquid) en mode avancé. Pour les caractères accentués, appliquez le filtre entities :

{{ company.name | entities }}

Limitations

Les en-têtes et pieds de page via les paramètres sont rendus par le mécanisme intégré d’impression de Chromium, qui impose des contraintes strictes :

• Pas de ressources externes — les images, la CSS et les polices ne peuvent pas être chargées via HTTP. Utilisez des data URI pour les images et des balises <style> inline pour la CSS. Pour les polices, consultez Polices dans les en-têtes et pieds de page.
• Pas d’UTF-8 pour les caractères accentués — le texte fixe nécessite des entités HTML (ex. é pour é). Pour les données dynamiques, utilisez le filtre entities.
• Pas d’exécution JavaScript — aucune solution de contournement.
• Impossible de sauter la page de couverture — aucune solution de contournement.
• Contrôle limité des styles — l’onglet CSS ne s’applique pas à l’intérieur de la zone d’en-tête/pied de page. Les styles doivent être inline.

En-tête et pied de page dans le contenu

Pour les documents à mise en page fixe où vous contrôlez chaque page individuellement — certificats, livres pour enfants, rapports de type diaporama — vous pouvez placer l’en-tête et le pied de page directement dans votre contenu HTML. Cette approche vous donne un accès complet à l’onglet CSS, aux images externes, aux polices web et au JavaScript. Aucune solution de contournement d’encodage nécessaire.

Un document est « à mise en page fixe » lorsque chaque page est un bloc distinct de taille connue et que le contenu ne s’écoule pas d’une page à la suivante. Chaque <div class="page"> est autonome.

Numéros de page avec les compteurs CSS

Puisque le contenu HTML ne sait pas sur quelle page il se trouve, vous utilisez un compteur CSS pour suivre les numéros de page. Voici un exemple en A4 portrait :

<div class="page">
  <div>Contenu de la page 1</div>
  <div class="page-number"></div>
</div>

<div class="page">
  <div>Contenu de la page 2</div>
  <div class="page-number"></div>
</div>

<div class="page">
  <div>Contenu de la page 3</div>
  <div class="page-number"></div>
</div>

/* Initialise un compteur nommé « page » à 0 */
/* Supprime les espacements par défaut pour un dimensionnement correct */
body {
  counter-reset: page;
  margin: 0;
  padding: 0;
}

/* Une page A4 portrait fait 793x1120px */
/* Cache le dépassement pour éviter les artefacts de zoom d’impression */
.page {
  height: 1120px;
  overflow: hidden;
  position: relative;
  width: 793px;
}

/* Positionne le numéro de page en bas à droite */
.page-number {
  bottom: 30px;
  position: absolute;
  right: 30px;
  text-align: right;
}

/* Incrémente le compteur et affiche sa valeur */
.page-number::before {
  counter-increment: page;
  content: counter(page);
}

Les compteurs CSS sont plus robustes que des numéros codés en dur dans le HTML car ils restent corrects lorsque des pages sont conditionnellement affichées/masquées ou générées dans une boucle.

Limitations

• Ne fonctionne que pour les documents à mise en page fixe. Si votre contenu s’écoule d’une page à l’autre (comme un long contrat), vous ne pouvez pas prédire où les sauts de page tomberont et donc pas placer un pied de page en bas de chaque page. Utilisez Paged.js à la place.

En-tête et pied de page avec Paged.js

Paged.js est une bibliothèque JavaScript qui implémente la spécification CSS Paged Media. Elle offre des en-têtes et pieds de page complets pour du contenu fluide — avec un support total de la CSS, des polices, des images et du JavaScript.

Fonctionnement

Paged.js repose sur deux concepts CSS :

1. Éléments flottants (running elements) — vous définissez des éléments HTML et les déclarez comme running() en CSS. Ils sont retirés du flux normal.
2. Boîtes de marge (margin boxes) — dans une règle @page, vous placez ces éléments flottants dans les zones de marge de la page (@top-center, @bottom-center, etc.).

Exemple pas à pas

1. Définissez les éléments d’en-tête et de pied de page dans votre HTML :

<div id="pageHeader">
  <div class="header-content">
    <img src="https://placekitten.com/60/60" />
    <div>Texte d’en-tête</div>
  </div>
</div>

<div id="pageFooter">
  <div class="footer-content">
    <div>Pied de page gauche</div>
    <div>Pied de page droite</div>
  </div>
</div>

<div class="content">Le contenu de votre document va ici.</div>

<script src="https://cdn.jsdelivr.net/npm/pagedjs@0.3.5/dist/paged.polyfill.js"></script>

2. Déclarez-les comme éléments flottants et stylisez-les dans l’onglet CSS :

/* Déclarer comme éléments flottants */
#pageHeader {
  position: running(pageHeader);
}

#pageFooter {
  position: running(pageFooter);
}

/* Styliser le contenu de l’en-tête et du pied de page */
.header-content, .footer-content {
  align-items: center;
  background: #1f2937;
  color: #fff;
  display: flex;
  height: 80px; /* Doit correspondre à la marge @page ci-dessous */
  justify-content: space-between;
  padding: 0 30px;
}

.content {
  text-align: center;
}

3. Placez-les dans les marges de la page :

@page {
  size: A4;

  /* Même hauteur que le contenu de l’en-tête/pied de page */
  margin: 80px 0;

  /* Placer les éléments flottants dans les marges de page */
  @top-center { content: element(pageHeader); }
  @bottom-center { content: element(pageFooter); }
}

Le résultat :

Problème connu : en-têtes de tableaux multi-pages

Paged.js peut casser les tableaux qui s’étendent sur plusieurs pages lorsqu’ils possèdent des éléments <thead>. Si vous rencontrez ce problème, consultez ce contournement sur GitHub.

En savoir plus

Pour les compteurs de pages, le contenu dynamique dans les marges, les exceptions de première page et d’autres fonctionnalités avancées, consultez la documentation Paged.js sur le Contenu généré dans les boîtes de marge.

Questions fréquentes

Comment ajouter des en-têtes et pieds de page à un PDF PDFMonkey ?

PDFMonkey propose trois approches : via les paramètres (remplir les champs d’en-tête/pied de page dans l’onglet Paramètres), dans le contenu (placer le HTML d’en-tête et pied de page directement dans votre template pour les documents à mise en page fixe), et Paged.js (une bibliothèque JavaScript pour le contenu fluide avec des en-têtes et pieds de page riches).

Peut-on ajouter des numéros de page à un PDF PDFMonkey ?

Oui. En mode paramètres, utilisez les balises [page] et [topage]. Pour les mises en page dans le contenu, utilisez les compteurs CSS. Avec Paged.js, utilisez le support intégré des compteurs de pages dans les boîtes de marge CSS.

Pourquoi mes images d’en-tête et de pied de page ne s’affichent-elles pas dans PDFMonkey ?

Les en-têtes et pieds de page via les paramètres ne peuvent pas charger de ressources externes via HTTP. Utilisez des data URI pour les images et des styles inline pour la CSS. Sinon, passez aux en-têtes dans le contenu ou via Paged.js qui supportent les images et polices externes.

Comment sauter l’en-tête sur la première page de mon PDF ?

Les en-têtes via les paramètres ne peuvent pas sauter la page de couverture. Utilisez plutôt l’approche Paged.js — elle prend en charge les exceptions de première page grâce aux règles CSS @page :first et aux éléments flottants.