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


188

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.

Réponses:


336

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;
    }
}

7
Mais comme toutes les bonnes choses en CSS, cela ne fonctionne pas toujours de manière cohérente dans tous les domaines, alors testez-en la lumière du jour, de peur que les utilisateurs en colère ne se demandent pourquoi votre site imprime des piles de pages vierges supplémentaires!
Zoe

13
Selon MDN, page-break-after«s'applique aux éléments de bloc qui génèrent une boîte», donc l'utilisation d'un <span>élément vide ne fonctionnera pas. Il est préférable de l'appliquer à une partie de votre contenu. Voir developer.mozilla.org/en-US/docs/Web/CSS/page-break-after
nullability

1
@nullability: Bonne prise. J'avais principalement utilisé cela à mon ancien travail dans un contrôle WebBrowser dans WinForms qui utilisait IE, l'étalon-or des normes suivantes.
Chris Doggett

1
Cela n'a pas fonctionné pour moi dans Chrome ... J'essaie de faire un saut de page à l'intérieur après un <tr> dans une <table>, cela fonctionnera-t-il dans ce cas?
delphirules

3
Pour une raison quelconque, lors de l'utilisation de cette astuce dans Chrome, 1 ligne de pixels de la page suivante fuyait dans la précédente (perceptible lors de l'utilisation de la couleur d'arrière-plan). Je l'ai corrigé en utilisant.pagebreak { min-height: 1px; page-break-before: always; }
pzmarzly

44

Essayez ce lien

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

Je pense que c'est une meilleure réponse car cela n'implique pas de modifier le HTML pour obtenir un effet visuel.
FinnNk

En fait, j'aime mieux l'autre, car cela me donne plus de contrôle. Je peux toujours attribuer la classe "pagebreak" uniquement aux H1 qui devraient faire sauter la page. Mais c'est toujours une bonne solution. +1 pour @media, bien que l'écran devrait ignorer le saut de page avant, je suppose. Merci!
Daniel Magliola

le h1 est un exemple de ce que vous pouvez utiliser comme étiquette pour la pause d'impression. Vous pouvez y substituer et marquer le nom de votre choix. vous pouvez également utiliser page-break-after: always
jfarrell

1
h1n'est pas un bon exemple, car cela signifie un titre de premier niveau, et une page ne devrait normalement avoir qu'un seul de ces titres.
Jukka K. Korpela

6
Si vous voulez ignorer le premier en-tête de la première page, essayezh1:not(:first-child) { page-break-before:always; }
Jeff Atwood

10

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 .


Il convient de noter que cette propriété n'est prise en charge que par les navigateurs Microsoft IE et Edge. caniuse.com
Benjamin

7

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 }

5

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)

1

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:


0
  • 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.


0

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.


0

CSS

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

HTML

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

-7

@ 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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.