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

Ajoutez une classe CSS appelée "pagebreak" (ou "pb"), comme suit :

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}

Ajoutez ensuite une balise DIV vide ( ou tout élément de bloc qui génère une boîte ) à l'endroit où vous voulez le saut de page.

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

Il n'apparaîtra pas sur la page, mais il la brisera à l'impression.

P.S. Peut-être que cela ne s'applique que lorsque l'on utilise -after (et aussi ce que vous pourriez faire d'autre avec d'autres <div> sur la page), mais j'ai constaté que je devais compléter la classe CSS comme suit :

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

Answer 2

Essayez ceci lien

<style>
@media print
{
h1 {page-break-before:always}
}
</style>

Answer 3

First page (scroll down to see the second page)
<div style="break-after:page"></div>
Second page
<br>
<br>
<button onclick="window.print();return false;" />Print (to see the result) </button>

Il suffit de l'ajouter là où vous avez besoin que la page passe à la suivante (le texte "page 1" sera sur la page 1 et le texte "page 2" sera sur la deuxième page).

Page 1
<div style='break-after:always'></div>
Page 2

Cela fonctionne aussi :

First page (there is a break after this)
<div style="break-after:page"></div>
Second page (This will be printed in the second page)

Answer 4

Je voulais juste vous donner des nouvelles. page-break-after est maintenant une propriété héritée.

Official page États

Cette propriété a été remplacée par la pause après propriété.

Answer 5

Vous pouvez utiliser la propriété CSS page-break-before (ou page-break-after ). Il suffit de mettre page-break-before: always sur ces éléments de niveau bloc (par exemple, l'en-tête, div , p ou table ) qui doivent commencer sur une nouvelle ligne.

Par exemple, pour provoquer un saut de ligne avant tout titre de 2e niveau et avant tout élément de la classe newpage (par exemple, <div class=newpage> ...), vous utiliserez

h2, .newpage { page-break-before: always }