Hentian Halaman Pencetakan Google Chrome

110

Saya mencoba mendapatkan google chrome untuk melakukan jeda halaman.

Saya telah diberi tahu melalui banyak situs web yang page-break-after: always;valid di chrome tetapi saya tampaknya tidak dapat membuatnya berfungsi bahkan dengan contoh yang sangat sederhana. apakah ada cara untuk memaksa jeda halaman saat mencetak di chrome?

css printing google-chrome Mike Valstar
sumber
Tampaknya hal ini relatif baru-baru ini (Februari 2014) telah dibahas (pada tiket bug tahun 2005 yang lama) di webkit bug tracker bugs.webkit.org/show_bug.cgi?id=5097
Alex KeySmith

Jawaban:

134

Saya telah berhasil menggunakan pendekatan berikut di semua browser utama termasuk Chrome:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>
    <div class="page">
      <h1>This is Page 2</h1>
    </div>
    <div class="page">
      <h1>This is Page 3</h1>
    </div>
  </body>
</html>

Ini adalah contoh yang disederhanakan. Dalam kode sebenarnya, setiap div halaman berisi lebih banyak elemen.

Phil Ross
sumber
4
Ah saya melihat masalah saya, saya pikir. Saya mencoba menggunakannya dengan tag <br/>
Mike Valstar
@ Mike Terima kasih telah menjawab masalah untuk saya. Tidak yakin mengapa br tidak berfungsi dan div berfungsi, tapi tetap saja perubahannya mudah.
Jeff Davis
ini berfungsi saat Anda mencoba menggunakan dengan halaman induk, tetapi tidak berfungsi saat Anda mencetak dari iframe (di chrome, tentu saja).
VJ
Baca juga jawaban @ peter di bawah ini; dia juga punya poin bagus tentang position: relative.
meragukan1ejack
6
Menurut spesifikasi break-afterdan break-beforehanya berlaku untuk block-level elements, table row groups, table rows (but see prose): drafts.csswg.org/css-break-3/#break-between - itu berarti tidak ada float atau trik pemosisian yang mewah.
Mikko Rantalainen
34

Sebenarnya satu detail hilang dari jawaban yang dipilih sebagai diterima (dari Phil Ross) ....

itu TIDAK bekerja di Chrome, dan solusinya adalah benar-benar konyol !!

Baik induk maupun elemen tempat Anda ingin mengontrol pemecah halaman harus dideklarasikan sebagai:

position: relative

lihat biola ini: http://jsfiddle.net/petersphilo/QCvA5/5/show/

Ini benar untuk:

page-break-before
page-break-after
page-break-inside

Namun, mengontrol pembobolan halaman di Safari tidak berfungsi (setidaknya di 5.1.7)

saya harap ini membantu!!!

PS: Pertanyaan di bawah ini menunjukkan fakta bahwa Chrome versi terbaru tidak lagi menghormati ini, bahkan dengan posisi: relatif; menipu. Namun, mereka tampaknya menghormati:

-webkit-region-break-inside: avoid;

lihat biola ini: http://jsfiddle.net/petersphilo/QCvA5/23/show

jadi saya rasa kita harus menambahkan itu sekarang ...

Semoga ini membantu!

Peter
sumber
Itu tergantung pada versi WebKit yang digunakan apakah berfungsi atau tidak di Chrome. Anda sendiri mengatakan itu tidak berfungsi di Safari 5.1.7, jadi menurut saya itu tidak konyol sama sekali. Versi WK yang diuji mungkin berbeda dari yang Anda uji.
Joel Peltonen
Halaman itu tidak berfungsi di Chrome 26.0.1410.65, saya mendapatkan 3 halaman dan yang terakhir hanya memiliki satu kata di atasnya). Saya juga mencoba memastikan elemen yang ingin saya terapkan aturannya dan induknya memiliki posisi: relatif di halaman saya sendiri, tetapi tetap tidak akan menambahkan jeda halaman saat mencetak. Jadi, apakah ini fitur yang hadir dan masuk di Chrome?
Joe Dyndale
Anda benar .... sepertinya tidak berfungsi di versi terbaru chrome; namun, Anda dapat menggantinya dengan: -webkit-region-break-inside: hindari; (lihat yang ini: jsfiddle.net/QCvA5/22/show )
Peter
@Peter Ada pembaruan di sini? Saya memposting pertanyaan SO dengan karunia mencoba memperbaiki situasi yang saya gunakan page-break-inside. Ada bantuan?
Zach Saucier
1
Ini bekerja untuk saya dengan satu keanehan - ini hanya berfungsi jika saya meletakkan gaya sebaris, dan bukan di file css yang terpisah. Saya menggunakannya pada elemen h7. Versi Chrome adalah 38.0.2125.111 m. <h7 class="page-breaker" style="display: block;position: relative;page-break-before:always">Grade <?php echo $grade;?></h7>
Gavin Simpson
16

Saya hanya ingin mencatat di sini bahwa Chrome juga mengabaikan pengaturan page-break- * css di div yang telah mengambang.

Saya menduga ada alasan kuat untuk ini di suatu tempat di spesifikasi css, tetapi saya pikir itu mungkin membantu seseorang suatu hari nanti ;-)

Hanya catatan lain: IE7 tidak dapat menerima pengaturan hentian halaman tanpa ketinggian eksplisit pada elemen blok sebelumnya:

http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/

fordareh
sumber
2
Kemungkinan karena floating sebuah elemen mengeluarkannya dari aliran dokumen dengan cara yang sama seperti memposisikannya. Elemen dengan posisi: absolute tidak akan berfungsi dengan page-break- *.
Joe Dyndale
1
Selain itu: tidak boleh ada elemen mengambang atau diposisikan absolut di antara semua induk elemen dengan gaya jeda halaman. Saya memiliki induk bootstrap "col-xs-12", ketika saya secara eksplisit menetapkan "float: none" padanya, jeda halaman mulai berfungsi!
Stalinko
12

Saya memiliki masalah yang mirip dengan ini tetapi saya akhirnya menemukan solusinya. Saya memiliki overflow-x: hidden; diterapkan ke tag <html> jadi apa pun yang saya lakukan di bawah ini di DOM, itu tidak akan pernah mengizinkan jeda halaman. Dengan kembali ke overflow-x: visible; itu bekerja dengan baik.

Semoga ini membantu seseorang di luar sana.

davidbehan.dll
sumber
Perhatikan bahwa elemen induk dengan properti tambahan tertentu dapat menyebabkan masalah ini. Saya baru saja menambahkan aturannya * { overflow-x: visible }.
Garrett
10

Saya sendiri mengalami masalah ini - pemutusan halaman saya berfungsi di setiap browser kecuali Chrome - dan dapat mengisolasinya ke elemen perusak halaman yang berada di dalam sel tabel. (Template lama yang diwariskan di CMS.)

Rupanya Chrome tidak menghormati properti page-break-before atau page-break-after di dalam sel tabel, jadi versi contoh Phil yang dimodifikasi ini menempatkan judul kedua dan ketiga pada halaman yang sama:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>

    <table>
    <tr>
        <td>
            <div class="page">
              <h1>This is Page 2</h1>
            </div>
            <div class="page">
              <h1>This is, sadly, still Page 2</h1>
            </div>
        </td>
    </tr>
    </table>
  </body>
</html>

Penerapan Chrome (meragukan) diizinkan dengan spesifikasi CSS - Anda dapat melihat lebih lanjut di sini: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=id

Nate Cook
sumber
Ini adalah masalah saya - dipaksa menggunakan sel tabel untuk tata letak oleh SharePoint 2007, jadi Chrome mematuhi deklarasi tata letak lembar gaya cetak apa pun :(
Dexter
8

Waspadalah terhadap CSS: display:inline-blocksaat mencetak.

Tak satu pun properti CCS untuk membuka halaman berikutnya akan berfungsi untuk saya di Chrome dan Firefox jika tabel saya berada di dalam div dengan gaya display:inline-block

Misalnya, berikut ini tidak berfungsi:

<div style='display:inline-block'>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>

Tetapi pekerjaan berikut:

<div>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>
Gudradain
sumber
1
Dan "mengapung" juga. Seharusnya tidak ada properti "float" di elemen induk.
Jimba Tamang
2
Sama dengandisplay: flex
Michael Schmid
4

Saya menghadapi masalah ini di chrome sebelumnya dan penyebabnya adalah karena div memiliki min-height yang disetel ke nilai. Solusinya adalah menyetel ulang min-height saat mencetak sebagai berikut:

@media print {
    .wizard-content{
        min-height: 0;
    }
}
Hamdy Ahmed
sumber
3

Pembaruan 2016:

Nah, saya mendapat masalah ini, ketika saya punya 

overflow:hidden

di div saya.

Setelah saya buat

@media print {
   div {
      overflow:initial !important
   }
}

semuanya menjadi baik dan sempurna

x0 z1
sumber
1
Ini memecahkan masalah ketika tidak ada orang lain yang melakukannya. Terima kasih!
bstory
1

Jika Anda menggunakan Chrome dengan Bootstrap Css, kelas yang mengontrol tata letak grid misalnya col-xs-12 dll menggunakan "float: left" yang, seperti yang ditunjukkan orang lain, merusak pemutusan halaman. Hapus ini dari halaman Anda untuk dicetak. Itu berhasil untuk saya. (Di versi Chrome = 49.0.2623.87)

Astra Bear
sumber
0

Punya masalah itu. Begitu lama berlalu ... Tanpa sisi-bidang halaman itu rusak normal, tetapi ketika bidang muncul, halaman dan "ruang jeda halaman" akan skala. Jadi, dengan bidang normal, di dalam dokumen, itu ditampilkan salah. Saya memperbaikinya dengan set

    width:100%

dan gunakan 

div.page
  {
    page-break-before: always;
    page-break-inside: avoid;
  }

Gunakan di baris pertama.

Intey
sumber
0

Sejauh yang saya tahu, satu-satunya cara untuk mendapatkan jeda halaman yang benar dalam tabel dengan Google Chrome adalah memberikannya ke elemen tampilan<tr> properti : inline-table (atau display: inline-block tetapi lebih cocok dalam kasus lain yang bukan tabel ). Juga harus digunakan properti "page-break-after: always; page-break-inside: hindari;" seperti yang ditulis oleh @Phil Ross

<table>
  <tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
    <td></td>
    <td></td>
    ...
  </tr>
</table>
Codekraft
sumber
1
Adakah petunjuk untuk mendapatkan ini agar tidak merusak margin / padding di dalam tds?
joeforker
@joeforker Anda harus menggunakan <tr> dengan "padding: 0; margin: 0;" dan memberikan properti margin ke elemen yang terkandung di dalamnya.
Codekraft
-2

Itu bekerja untuk saya ketika saya menggunakan bantalan seperti:

<div style="padding-top :200px;page-break-inside:avoid;">
   <div>My content</div>
</div>
Tuvia Khusid
sumber
Ini hanya berfungsi karena bantalan dan bukan karena jeda halaman
Char