Wicked_pdf #3 : Le saut de page et son inverse

April 20, 2015 | about 1 minute read

Continuons à parcourir wicked_pdf et ses fonctionnalités. Après l’installation et la mise en place de style, place à deux options CSS très utiles pour apprendre à forcer le saut de page ou à l’inverse empêcher un saut de page au milieu d’un élément.

1 - Sauter une page

Il peut être utile de forcer le document à changer de page (connu aussi sous le terme “saut de page” sur traitement de texte). C’est possible avec wicked_pdf grâce à cette astuce :

/* app/assets/stylesheets/pdf_styles.css */
 
.page-break { 
  display:block;
  clear:both; 
  page-break-after:always; 
}

/* app/assets/stylesheets/pdf_styles.css */
 
# app/views/mon_objet/show.pdf.erb
( ... )
<div class="page-break"></div>
( ... )
}

On créer une classe CSS “page-break” que l’on appelle dans notre vue partout où l’on souhaite ajouter un saut de page !

2 – Empêcher un saut de page sur un élément

Difficile de gérer les “orphelins” sur wicked_pdf (pour reprendre certaines fonctionnalités utiles d’un traitement de texte). Cependant on peut spécifier qu’un élément de notre page ne peut se “casser” et se trouver sur deux pages différentes.

Pour régler ce problème il suffit de créer une classe CSS que l’on appelle depuis l’élément souhaité :

.ma-classe{
  page-break-inside: avoid !important;
}

Et voilà le tour est joué ! On se retrouve dans quelques jours pour voir comment personnaliser encore un peu plus un PDF avec les notions de marges, de numéros de pages, de header & footer etc.

Originally published at Sois-net.