Puis-je forcer un saut de page dans l'impression HTML ?

Question

Je suis en train de créer un rapport HTML qui sera imprimable et qui comporte des "sections" qui doivent commencer dans une nouvelle page.

Existe-t-il un moyen d'intégrer quelque chose dans le HTML/CSS qui signale au navigateur qu'il doit forcer un saut de page (commencer une nouvelle page) à ce moment-là ?

Je n'ai pas besoin que cela fonctionne dans tous les navigateurs existants, je pense que je peux dire aux gens d'utiliser un ensemble spécifique de navigateurs afin d'imprimer ceci.

Answer 1

Essayez ceci (cela fonctionne dans Chrome, Firefox et IE) :

... content in page 1 ...
<p style="page-break-after: always;">&nbsp;</p>
<p style="page-break-before: always;">&nbsp;</p>
... content in page 2 ...

Answer 2

Disons que vous avez un blog avec des articles comme celui-ci :

<div class="article"> ... </div>

Le fait d'ajouter ceci au CSS a fonctionné pour moi :

@media print {
  .article { page-break-after: always; }
}

(testé et fonctionnant sur Chrome 69 et Firefox 62).

Référence :

• https://www.w3schools.com/cssref/pr_print_pageba.asp

• https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ; note importante : il est dit ici This property has been replaced by the break-after property. mais cela n'a pas fonctionné pour moi avec break-after . Voir aussi la documentation MDN sur break-after ne semble pas être spécifique pour les sauts de page, donc je préfère garder le (qui fonctionne) page-break-after: always; .

Answer 3

J'avais besoin d'un saut de page après chaque 3ème ligne lorsque nous utilisons la commande d'impression du navigateur.

J'ai ajouté

<div style='page-break-before: always;'></div>

après chaque 3ème rangée et mes divisions parentales ont display: flex; J'ai donc retiré display: flex; et ça a fonctionné comme je le voulais.

Answer 4

CSS

@media print {
  .pagebreak { 
     page-break-before: always; 
  }
}

HTML

<div class="pagebreak"></div>

Answer 5

Je me suis battu contre ça pendant un certain temps, ça n'a jamais marché.

Finalement, la solution a été de mettre un élément de style dans la tête.

La page-break-after ne peut pas être dans un fichier CSS lié, elle doit être dans le HTML lui-même.