Appliquer les sauts de page d'impression avec CSS

J'ai une page qui affiche essentiellement tous les ordres de travail pour un jour donné. J'ai essayé de créer le code HTML afin que je puisse utiliser page-break-after: toujours pour créer un saut de page d'impression logique et continuer. Cependant, lorsque l'utilisateur imprime la page, il y a souvent des chevauchements, plusieurs ordres de travail sur la même page, etc. Je veux simplement imposer un saut de page que Firefox, Safari et Chrome vont écouter.Appliquer les sauts de page d'impression avec CSS

Mon HTML ressemble à ceci

<div class="WOPrint"> 
    <div class="WOHeader"> 
     <h1>Header stuff</h1> 
    </div> 
    <!-- content --> 
</div> 
<div class="WOPageBreak"></div> 
<div class="WOPrint"> 
    <div class="WOHeader"> 
     <h1>Header stuff</h1> 
    </div> 
    <!-- content --> 
</div> 
<div class="WOPageBreak"></div> 
<!-- repeat N times --> 
<div class="WOPrint"> 
    <div class="WOHeader"> 
     <h1>Header stuff</h1> 
    </div> 
    <!-- content --> 
</div> 
<div class="WOPageBreak"></div>

et mon CSS est essentiellement comme ceci:

.WOPrint 
{ 
    max-width: 100%; 
    padding-bottom: 3em; 
} 

.WOHeader 
{ 
    display: block; 
    page-break-inside: avoid; 
} 

.WOPageBreak 
{ 
    height: 1px; 
    width: 100%; 
    float: left; 
    page-break-after: always; 
    display: block; 
}

EDIT Dans une tentative hackish je joué avec le réglage de la min- classe WOPrint la taille. Le changement à 9 pouces semble me donner assez de marge pour imprimer à partir de tous les Safari, Firefox et Chrome quand je l'ai réglé à un format de papier américain standard. Ce n'est certainement pas la façon dont je voudrais le réparer, mais je ne veux pas avoir à rendre au format PDF.

.WOPrint 
    { 
     max-width: 100%; 
     padding-bottom: 3em; 
     min-heihgt: 9in 
    }

Source

2010-11-30 ashurexm

réponse courte. Vous ne pouvez pas que ce ne soit pas pris en charge de manière cohérente dans tous les navigateurs. il y a un soutien un peu mieux pour la page-break-before que page-break-après si ...

voir page-break-before la compatibilité et la compatibilité page-break-after

vous pouvez également essayer l'intégration d'un Ctrl-L dans la page à ces points pensaient que je Je suis à peu près sûr que beaucoup de pilotes d'imprimantes vont l'ignorer.

Source

2010-11-30 22:04:12 FatherStorm

Alors dois-je examiner sérieusement à rendre cela comme un PDF de plusieurs pages seulement parce que Je ne peux pas obtenir un saut de page entre divs? – ashurexm

Si vous voulez garantir cross-browser alors malheureusement, oui. pensé que je suis sur le point de tester le peu Ctrl-L à travers quelques navigateurs par curiosité – FatherStorm

annnnd, non .. si seulement vous étiez en train d'imprimer sur une imprimante locale au serveur ... http://docs.php.net/ manual/fr/function.printer-open.php – FatherStorm

En définissant la min-height dans la WOPrint classe CSS je suis capable de simuler une coupure de page approximative pour une page standard de hauteur:

.WOPrint 
    { 
     max-width: 100%; 
     padding-bottom: 3em; 
     min-height: 9in; 
    }

Source

2010-11-30 23:59:51 ashurexm

Tout ce que vous avez besoin est

.WOPageBreak 
{ 
    page-break-before: always; 
}

Cependant, vous Je veux également ajouter "débordement: visible" à la balise body car sans cela, Firefox n'imprimera que la première page.

Vous pouvez également obtenir des résultats plus cohérents si vous définissez la marge: 0 sur le corps lors de l'impression, comme ceci:

@media print{body{margin:0}}

Source

2017-07-11 01:28:16 Vincent

Appliquer les sauts de page d'impression avec CSS

Répondre

Questions connexes