Kan ik een pagina-einde forceren in HTML-afdrukken?

Ik maak een HTML-rapport dat kan worden afgedrukt, en het heeft “secties” die op een nieuwe pagina zouden moeten beginnen.

Is er een manier om iets in de HTML/CSS te plaatsen dat de browser aangeeft dat hij op dat moment een pagina-einde moet forceren (een nieuwe pagina starten)?

Ik heb dit niet nodig om in elke browser te werken, ik denk dat ik mensen kan vertellen om een ​​specifieke set browsers te gebruiken om dit af te drukken.


Antwoord 1, autoriteit 100%

Voeg een CSS-klasse toe met de naam “pagebreak” (of “pb”), zoals:

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

Voeg vervolgens een lege DIV-tag toe (of een willekeurig blok element dat een vak genereert) waar u het pagina-einde wilt hebben.

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

Het verschijnt niet op de pagina, maar breekt de pagina op tijdens het afdrukken.

P.S. Misschien is dit alleen van toepassing bij het gebruik van -after (en ook wat je nog meer zou kunnen doen met andere <div>‘s op de pagina), maar ik merkte dat ik vergroot de CSS-klasse als volgt:

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

Antwoord 2, autoriteit 12%

Probeer deze link

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

Antwoord 3, autoriteit 4%

Ik wilde alleen een update plaatsen. page-break-after is nu een verouderde eigenschap.

Officiële pagina staten

Deze eigenschap is vervangen door de break-after eigendom.


Antwoord 4, autoriteit 4%

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>

Antwoord 5, autoriteit 2%

U kunt de CSS-eigenschap page-break-before (of page-break-after). Stel gewoon page-break-before: always in op die elementen op blokniveau (bijv. kop, div, p of table elementen) die op een nieuwe regel moeten beginnen.

Bijvoorbeeld om een ​​regeleinde te veroorzaken voor een kop op het 2e niveau en voor elk element in de klasse newpage (bijv. <div class=newpage>… ), zou je gebruiken

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

Antwoord 6

Probeer dit (het werkt in Chrome, Firefox en 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 ...

Antwoord 7

Stel dat je een blog hebt met artikelen als deze:

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

Dit toevoegen aan de CSS werkte voor mij:

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

(getest en werkend op Chrome 69 en Firefox 62).

Referentie:


Antwoord 8

CSS

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

HTML

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

Antwoord 9

Ik had een pagina-einde nodig na elke 3e rij terwijl we de printopdracht in de browser gebruiken.

Ik heb toegevoegd

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

na elke 3e rij en mijn bovenliggende div hebben display: flex;
dus ik heb display: flex; verwijderd en het werkte zoals ik wilde.


Antwoord 10

Ik worstelde hier al een tijdje mee, het heeft nooit gewerkt.

Uiteindelijk was de oplossing om een ​​stijlelement in het hoofd te plaatsen.

De pagina-einde-na mag niet in een gekoppeld CSS-bestand staan, het moet in de HTML zelf staan.


Antwoord 11

  • We kunnen een pagina-einde-tag toevoegen met de stijl “page-break-after: always” op het punt waar we het pagina-einde in de
    html-pagina.
  • page-break-before” werkt ook

Voorbeeld:

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

Tijdens het afdrukken van het html-bestand met de bovenstaande code, toont het afdrukvoorbeeld drie pagina’s (één voor elk html-blok “HTML_BLOCK_n“) waar, net als in de browser, alle drie de blokken achter elkaar verschijnen de andere.


Antwoord 12

@Chris Doggett is volkomen logisch.
Hoewel ik een grappige truc vond op lvsys. com, en het werkt echt op Firefox en Chrome. Plaats deze opmerking gewoon overal waar u het pagina-einde wilt invoegen. Je kunt ook de tag <p> vervangen door een willekeurig blokelement.

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes