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;"> </p>
<p style="page-break-before: always;"> </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:
-
https://developer. mozilla.org/en-US/docs/Web/CSS/page-break-after ; belangrijke opmerking: hier staat
This property has been replaced by the break-after property.maar het werkte niet voor mij metbreak-after. Ook het MDN-document overbreak-afterlijkt niet specifiek te zijn voor page-breaks, dus ik geef er de voorkeur aan om de (werkende)page-break-after: always;te behouden .
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>