Bisakah saya memaksakan istirahat halaman dalam pencetakan HTML?

Saya membuat laporan HTML yang akan dicetak, dan memiliki "bagian" yang harus dimulai di halaman baru.

Apakah ada cara untuk meletakkan sesuatu di HTML / CSS yang akan memberi sinyal ke browser bahwa ia perlu memaksa page break (mulai halaman baru) pada saat itu?

Saya tidak membutuhkan ini untuk bekerja di setiap browser di luar sana, saya pikir saya dapat memberitahu orang untuk menggunakan satu set browser tertentu untuk mencetak ini.

Tambahkan kelas CSS yang disebut "pagebreak" (atau "pb"), seperti:

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

Kemudian tambahkan tag DIV kosong ( atau elemen blok apa pun yang menghasilkan kotak ) di mana Anda ingin page break.

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

Itu tidak akan muncul di halaman, tetapi akan memecah halaman saat mencetak.

PS Mungkin ini hanya berlaku ketika menggunakan -after(dan juga apa lagi yang mungkin Anda lakukan dengan orang lain <div>di halaman), tetapi saya menemukan bahwa saya harus menambah kelas CSS sebagai berikut:

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

Coba tautan ini

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

Hanya ingin menempatkan pembaruan. page-break-afteradalah properti warisan sekarang.

Resmi halaman negara

Properti ini telah digantikan oleh properti break-after .

Anda dapat menggunakan properti CSS page-break-before(atau page-break-after). Hanya mengatur page-break-before: alwaystentang unsur-unsur blok-tingkat (misalnya, pos, div, p, atau tableelemen) yang harus mulai pada baris baru.

Misalnya, untuk menyebabkan garis terputus sebelum judul tingkat 2 dan sebelum elemen apa pun di kelas newpage(misalnya, <div class=newpage>...), Anda akan menggunakan

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>

Cukup tambahkan ini di mana Anda perlu halaman untuk pergi ke yang berikutnya (teks "halaman 1" akan di halaman 1 dan teks "halaman 2" akan berada di halaman kedua).

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

Ini juga berfungsi:

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

Katakanlah Anda memiliki blog dengan artikel seperti ini:

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

Hanya menambahkan ini ke CSS berfungsi untuk saya:

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

(diuji dan bekerja pada Chrome 69 dan Firefox 62).

Referensi:

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

• https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ; catatan penting: di sini dikatakan This property has been replaced by the break-after property.tetapi tidak berhasil untuk saya break-after. Juga dokumen MDN tentang break-aftertampaknya tidak spesifik untuk istirahat halaman, jadi saya lebih suka menjaga (berfungsi) page-break-after: always;.

• Kita dapat menambahkan tag penghentian halaman dengan gaya " break-after-after: always " pada titik di mana kami ingin memperkenalkan pagebreak di halaman html.
  
• " page-break-before " juga berfungsi

Contoh:

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

Saat mencetak file html dengan kode di atas, pratinjau cetak akan menampilkan tiga halaman (satu untuk setiap blok html " HTML_BLOCK_n ") di mana seperti di browser semua tiga blok muncul secara berurutan satu demi satu.

Saya perlu istirahat halaman setelah setiap baris ke-3 saat kami menggunakan perintah cetak pada browser.

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

setelah setiap baris ke-3 dan div orangtua saya memiliki tampilan: flex; jadi saya menghapus tampilan: flex; dan itu berfungsi seperti yang saya inginkan.

CSS

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

HTML

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

@ Chris Doggett masuk akal. Meskipun, saya menemukan satu trik lucu di lvsys.com , dan itu sebenarnya berfungsi pada firefox dan chrome. Letakkan komentar ini di mana saja Anda ingin page-break dimasukkan. Anda juga dapat mengganti <p>tag dengan elemen blok apa pun.

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