HTML yazdırmada sayfa sonunu zorlayabilir miyim?

Yazdırılabilir bir HTML raporu hazırlıyorum ve yeni bir sayfada başlaması gereken "bölümler" var.

HTML / CSS'ye tarayıcıya o noktada bir sayfa sonunu (yeni bir sayfa başlat) zorlaması gerektiğini bildirecek bir şey koymanın bir yolu var mı?

Buradaki her tarayıcıda çalışmak için buna ihtiyacım yok, sanırım insanlara bunu yazdırmak için belirli bir tarayıcı seti kullanmalarını söyleyebilirim.

"Pagebreak" (veya "pb") adlı bir CSS sınıfı ekleyin, şöyle:

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

Ardından , sayfanın kesilmesini istediğiniz yere boş bir DIV etiketi ( veya bir kutu oluşturan herhangi bir blok öğesi ) ekleyin.

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

Sayfada görünmez, ancak yazdırırken sayfayı keser.

PS Belki de bu sadece -after(ve <div>sayfadaki diğer s ile ne yapıyor olabilirsiniz) kullanırken geçerlidir , ancak aşağıdaki gibi CSS sınıfını artırmak zorunda buldum:

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

Bu bağlantıyı deneyin

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

Sadece bir güncelleme koymak istedim. page-break-afterartık eski bir mülktür.

Resmi sayfa durumları

Bu özelliğin yerini ayırma özelliği aldı.

CSS özelliğini page-break-before(veya page-break-after) kullanabilirsiniz. Sadece set page-break-before: alwaysolanlar blok seviyesinden elemanlar (örneğin, başlığı, üzerinde div, pya da tableyeni bir satırda başlamalı elemanları).

Örneğin, herhangi bir 2. düzey başlıktan önce ve sınıftaki herhangi bir öğeden önce newpage(örneğin, <div class=newpage>...) satır kesmesine neden olmak için ,

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>

Bunu, bir sonrakine gitmek için sayfanın gerekli olduğu yere ekleyin ("sayfa 1" metni sayfa 1'de ve "sayfa 2" metni ikinci sayfada olacaktır).

Page 1
<div style='page-break-after:always'></div>
Page 2

Bu da işe yarıyor:

First page (there is a break after this)
<div style="break-after:page"></div>
Second page (This will be printed in the second page)

Diyelim ki böyle makaleler içeren bir blogunuz var:

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

Sadece CSS'ye eklemek benim için çalıştı:

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

(Chrome 69 ve Firefox 62 üzerinde test edildi ve çalışıyor).

Referans:

• https://www.w3schools.com/cssref/pr_print_pageba.asp

• https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ; önemli not: burada söylendi This property has been replaced by the break-after property.ama benim için işe yaramadı break-after. Ayrıca hakkında MDN doc break-aftersayfa sonları için belirli görünmüyor, bu yüzden (çalışma) tutmak tercih page-break-after: always;.

• Html sayfasında pagebreak'i tanıtmak istediğimiz noktaya " page-break-after: always " tarzında bir sayfa sonu etiketi ekleyebiliriz .
  
• " page-break-before " da çalışır

Misal:

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

Yukarıdaki kodla html dosyasını yazdırırken, baskı önizlemesi üç sayfa gösterir (her html bloğu için bir tane " tarayıcıda olduğu gibi üç bloğun da birbiri ardına göründüğü HTML_BLOCK_n " için bir tane) gösterir.

Tarayıcıda print komutunu kullanırken her 3 satırdan sonra bir sayfa sonu almam gerekiyordu.

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

her 3. sırada ve ana div ekranımda: flex; bu yüzden ekranı kaldırdım: flex; ve istediğim gibi çalışıyordu.

CSS

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

HTML

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

@ Chris Doggett mükemmel bir anlam ifade ediyor. Her ne kadar, lvsys.com'da komik bir numara buldum ve aslında firefox ve krom üzerinde çalışıyor. Bu yorumu sayfa sonunun eklenmesini istediğiniz yere koymanız yeterlidir. <p>Etiketi herhangi bir blok öğesiyle de değiştirebilirsiniz .

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