Tutoriels

Comment ajouter pagination, dates et titres à votre PDF

Comment ajouter pagination, dates et titres à votre PDF

Si vous sauvegardez une recette de cuisine, une simple capture d'écran suffit.

Mais si vous sauvegardez une page web comme preuve juridique, pour une recherche universitaire ou pour des dossiers d'entreprise, une simple image ne suffit pas. Vous avez besoin de contexte. Vous devez savoir exactement quand la page a été enregistrée, d'où elle provient, et disposer de numéros de page pour une référence facile.

Notre outil dispose d'une fonctionnalité avancée d'En-tête et Pied de page (Header & Footer) intégrée. Elle vous permet d'injecter ces informations automatiquement sur chaque page de votre PDF.

Voici comment l'utiliser, y compris quelques modèles à copier-coller que vous pouvez utiliser dès maintenant.

Comment ça marche

Dans la section "Paramètres avancés" (Advanced Settings) de notre outil, vous trouverez deux zones de texte :

  1. Header HTML (Apparaît tout en haut de chaque page)
  2. Footer HTML (Apparaît tout en bas de chaque page)

header & footer templates

Vous pouvez écrire du HTML standard ici, mais la vraie magie vient de l'utilisation de nos Classes CSS Spéciales. Si vous utilisez ces noms de classe spécifiques, notre convertisseur les remplira automatiquement avec les données correctes :

  • <span class='date'></span> → Insère la date d'impression actuelle.
  • <span class='title'></span> → Insère le titre de la page web.
  • <span class='url'></span> → Insère l'URL source.
  • <span class='pageNumber'></span> → Insère le numéro de la page actuelle.
  • <span class='totalPages'></span> → Insère le nombre total de pages.

3 Modèles à Copier-Coller

Nous avons écrit ces modèles en utilisant du CSS robuste et inline (style="...") afin qu'ils fonctionnent parfaitement dans le moteur PDF sans avoir besoin de feuilles de style externes.

1. Le "Numéro de Page Simple" (Pied de page)

C'est le classique. Il place un petit numéro de page centré en bas de chaque page.

Collez ceci dans "Footer HTML" :

<div style="font-size: 10px; text-align: center; width: 100%; padding-top: 5px;">
  Page <span class="pageNumber"></span> sur <span class="totalPages"></span>
</div>

2. Le Pied de page "Archivage" (Juridique/Recherche)

Parfait pour capturer des preuves. Il liste l'URL source à gauche et la date d'enregistrement à droite.

Collez ceci dans "Footer HTML" :

<div style="font-size: 8px; width: 100%; border-top: 1px solid #ccc; padding-top: 5px; overflow: hidden;">
  <span style="float: left; max-width: 70%;">Source : <span class="url"></span></span>
  <span style="float: right;">Enregistré le : <span class="date"></span></span>
</div>

3. L'En-tête "Rapport Professionnel"

Donne à votre capture web l'apparence d'un document officiel. Il met le Titre en gras à gauche et la Date à droite.

Collez ceci dans "Header HTML" :

<div style="font-size: 10px; width: 100%; margin-bottom: 10px; overflow: hidden;">
  <span style="float: left; font-weight: bold; max-width: 75%;" class="title"></span>
  <span style="float: right;" class="date"></span>
</div>

Conseils Importants

  1. ⚠️ Vous DEVEZ définir des marges : Les en-têtes et pieds de page s'impriment à l'intérieur des marges de la page. Si vos marges sont réglées sur "0", votre en-tête sera invisible ! Vous devez régler les marges supérieure et inférieure à au moins 10mm (environ 0.4in) pour que ces modèles s'affichent.
  2. Taille de la police : Le moteur PDF traite les tailles de police différemment d'un écran. Nous recommandons d'utiliser 8px à 10px. Tout ce qui est plus petit risque de disparaître.

Prêt à passer au niveau supérieur ? Maîtriser les en-têtes n'est qu'une étape. Pour plus de conseils sur la création de documents professionnels, consultez Le guide ultime pour créer le PDF de page web parfait.

Articles similaires