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

Je fais un rapport HTML qui va être imprimable, et il a des "sections" qui devraient commencer dans une nouvelle page.

Existe-t-il un moyen de mettre quelque chose dans le HTML / CSS qui signalera au navigateur qu'il doit forcer un saut de page (démarrer une nouvelle page) à ce stade?

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

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

@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 cassera la page lors de l'impression.

PS Peut-être que cela ne s'applique que lors de l'utilisation -after(et aussi de ce que vous pourriez faire d'autre avec d'autres <div>s sur la page), mais j'ai trouvé que je devais augmenter la classe CSS comme suit:

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

Essayez ce lien

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

Je voulais juste mettre une mise à jour. page-break-afterest maintenant une propriété héritée.

États de la page officielle

Cette propriété a été remplacée par la propriété break-after .

Vous pouvez utiliser la propriété CSS page-break-before(ou page-break-after). Il suffit de définir page-break-before: alwayssur ces éléments au niveau des blocs (par exemple, le cap div, pou tableéléments) qui devrait commencer sur une nouvelle ligne.

Par exemple, pour provoquer un saut de ligne avant tout en-tête de 2e niveau et avant tout élément de la classe newpage(par exemple, <div class=newpage>...), vous utiliseriez

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

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>

Ajoutez simplement ceci là où vous avez besoin de la page pour aller à 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='page-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)

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

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

L'ajout de ceci au CSS a fonctionné pour moi:

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

(testé et fonctionne 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: ici c'est dit This property has been replaced by the break-after property.mais ça n'a pas fonctionné pour moi avec break-after. De plus, la documentation MDN sur break-afterne semble pas être spécifique pour les sauts de page, donc je préfère garder le (en état de marche) page-break-after: always;.

• Nous pouvons ajouter une balise de saut de page avec le style " page-break-after: always " au point où nous voulons introduire le saut de page dans la page html.
  
• " page-break-before " fonctionne également

Exemple:

HTML_BLOCK_1
<p style="page-break-after: always"></p>
HTML_BLOCK_2
<p style="page-break-after: always"></p>
HTML_BLOCK_3

Lors de l'impression du fichier html avec le code ci-dessus, l'aperçu avant impression affichera trois pages (une pour chaque bloc html " HTML_BLOCK_n ") où, comme dans le navigateur, tous les trois blocs apparaissent séquentiellement l'un après l'autre.

J'avais besoin d'un saut de page après chaque 3ème ligne pendant que nous utilisons la commande d'impression sur le navigateur.

J'ai ajouté <div style = 'page-break-before: always;'> </div>

après chaque 3ème ligne et mon div parent ont affichage: flex; j'ai donc supprimé l'affichage: flex; et cela fonctionnait comme je le voulais.

CSS

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

HTML

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

@ Chris Doggett est parfaitement logique. Bien que j'ai trouvé une astuce amusante sur lvsys.com , et cela fonctionne réellement sur Firefox et Chrome. Placez simplement ce commentaire là où vous souhaitez insérer le saut de page. Vous pouvez également remplacer la <p>balise par n'importe quel élément de bloc.

<p><!-- pagebreak --></p>