bagaimana cara menghindari halaman kosong ekstra di akhir saat mencetak?

90

Saya menggunakan properti CSS,

Jika saya menggunakan page-break-after: always; => Ini mencetak halaman kosong ekstra sebelumnya

Jika saya menggunakan page-break-before: always;=> Ini mencetak halaman kosong ekstra setelahnya. Bagaimana cara menghindarinya?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
    page-break-after: always;

}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>
css printing Angelin Nadar
sumber
berapa tinggi kelas cetaknya?
juankysmith
1
Karena ini untuk faktur, tingginya akan dinamis sesuai dengan jumlah item.
Angelin Nadar
6
Beginilah cara kami melakukannya dalam perang dingin:<div>This page intentionally left blank.</div>
Bob Stein

Jawaban:

72

Anda mungkin bisa menambahkan

.print:last-child {
     page-break-after: auto;
}

jadi printelemen terakhir tidak akan mendapatkan jeda halaman ekstra.

Perhatikan bahwa: pemilih anak terakhir tidak didukung di IE8, jika Anda menargetkan browser yang malang itu.

AKX
sumber
89
Tidak apa-apa karena "Tidak didukung di IE" adalah fitur dafault IE
Angelin Nadar
1
Untuk pembaca lain, ini tidak berhasil untuk saya, tetapi jawaban di bawah ini tentang pengaturan ketinggian otomatis pada HTML dan elemen tubuh bekerja seperti pesona.
Cody
102

Sudahkah kamu mencobanya?

@media print {
    html, body {
        height: 99%;    
    }
}
giannis.epp
sumber
2
Saat saya bekerja: @media print {html {height: 99%; }}, dengan isi dokumen yang dibuat lebih besar
Gustavo
11
Dalam kasus saya, Zurb Foundation mengatur html dan body ke height: 100%. Saya bisa menimpa ini denganheight: auto
zacharydl
5
Mengonfirmasi bahwa komentar @zacharydl berhasil untuk saya, dan juga itu height: auto;lebih elegan daripadaheight: 99%;
jontsai
Saya mengalami masalah ini, karena saya mengatur tinggi html menjadi 101% untuk memaksa scrollbar agar selalu ditampilkan. (Menghilangkan lompatan antar halaman) - jadi ya, tinggi 100% dalam gaya cetak adalah solusi yang bagus! - Bersulang.
rob_james
@rob_james untuk menghindari penggunaan 101%, Anda dapat menyetel overflow-y: scroll; agar bilah gulir selalu terlihat
pengguna161592
46

Solusi yang dijelaskan di sini membantu saya ( tautan arsip web ).

Pertama-tama, Anda dapat menambahkan batas ke semua elemen untuk melihat apa yang menyebabkan halaman baru ditambahkan (mungkin beberapa margin, bantalan, dll).

div { border: 1px solid black;}

Dan solusinya sendiri adalah menambahkan gaya berikut:

html, body { height: auto; }
Michael Radionov
sumber
9
Wow, ini blog lama saya! Saya baru saja memiliki masalah yang sama dan berpikir saya sudah memperbaiki ini sekali ^^ dunia kecil
Miguel Stevens
3
ditambah 1 untuk menambahkan batas div.
Iftikhar Ali Ansari
Menambahkan perbatasan adalah ide yang bagus !! Ini membantu saya menyadari bahwa ada set tinggi min pada pembungkus halaman saya yang menyebabkan halaman tambahan muncul. Aku membenturkan kepalaku pada ini untuk sementara waktu. Terima kasih banyak!
erichunt
34

jika Tidak ada yang berhasil, coba ini

@media print {

    html, body {
      height:100vh; 
      margin: 0 !important; 
      padding: 0 !important;
      overflow: hidden;
    }

}

pastikan 100vh

Bryan Chan
sumber
4
mengatur ketinggian ke 100vh memecahkan masalah saya. Terima kasih
pengguna2398069
1
"@media print {* {overflow: hidden! important;}}" sangat penting bagi saya.
shinriyo
1
Akhirnya jawaban untuk masalah yang tidak jelas! Safari di OSX menunjukkan halaman yang benar-benar kosong sementara Chrome, FF dan Edge semuanya baik dengan pratinjau. Terima kasih banyak!
pop
1
Memiliki tinggi yang disetel ke 100vh tampaknya menjaganya agar tidak memuat lebih dari satu halaman, sehingga jika dokumen memiliki lebih dari satu halaman, hanya halaman pertama yang dimuat di pratinjau
Filipe
8

Ini berhasil untuk saya 

.print+.print {
    page-break-before: always;
}
Lam
sumber
Ini bekerja untuk saya lebih baik daripada yang lain! Beberapa info lebih lanjut di sini: blog.jonesed.net/2012/10/…
RemarkLima
5

Jika Anda hanya ingin menggunakan CSS dan ingin menghindari jeda halaman, gunakan 

.print{
    page-break-after: avoid;

}

Lihatlah media berhalaman

Anda dapat menggunakan skrip yang setara untuk pageBreakBefore dan pageBreakAfter, menetapkan nilainya secara dinamis. Misalnya, daripada memaksakan hentian halaman kustom pada pengunjung Anda, Anda bisa membuat skrip untuk menjadikannya opsional. Di sini saya akan membuat kotak centang yang beralih antara memotong halaman di header (h2) dan atas kebijakan printer sendiri (default):

<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>

<script type="text/javascript">
 function breakeveryheader(){
 var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
 for (i=0; i<document.getElementsByTagName("H2").length; i++)
 document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
 }

Klik di sini untuk contoh yang menggunakan ini. Anda dapat mengganti H2 di dalam skrip dengan tag lain seperti P atau DIV.

http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

bilash.saha
sumber
4

diatur display:noneuntuk semua elemen lain yang bukan untuk dicetak. pengaturan visibility:hiddenakan membuat mereka tetap tersembunyi, tetapi mereka semua masih ada dan telah mengambil tempat untuk mereka. halaman kosong adalah untuk elemen tersembunyi itu.

Janaka R Rajapaksha
sumber
Thx, jika Anda memiliki konten dinamis, Anda dapat menggunakan :notselektor untuk mengatur semuanya display: nonetetapi bukan kelas cetak, sepertibody > :not(.print) { display: none !important; }
Putzi San
4

Tidak tahu (untuk saat ini) mengapa, tapi yang ini membantu:

   @media print {
        html, body {
            border: 1px solid white;
            height: 99%;
            page-break-after: avoid;
            page-break-before: avoid;
        }
    }

Semoga seseorang akan menyelamatkan rambutnya saat berjuang dengan masalah ...;)

Adam G.
sumber
4

Sepertinya ada banyak kemungkinan penyebabnya, dengan tema yang mungkin adalah bahwa body tag berakhir dengan ketinggian yang dianggap terlalu besar karena alasan tertentu.

Penyebab saya: min-height: 100%di stylesheet dasar.

Solusi saya: min-height: autodalam @media printarahan.

Catatan, autotampaknya bukan nilai yang benar, menurut PhpStorm. Namun, ini benar menurut dokumentasi Mozilla tentang min-height :

auto
Ukuran minimum default untuk item fleksibel, memberikan default yang lebih masuk akal daripada 0 untuk tata letak lainnya.

George Marian
sumber
Saya hanya meletakkan 'min-height: awal! Penting;' dan itu berhasil untuk saya.
Siby Thomas
@SibyThomas Saya menghindari! Pernyataan penting jika memungkinkan. Itu membuat segalanya lebih sulit untuk mengganti properti. Saya bahkan tidak mempertimbangkan initialkarena saya berasumsi itu akan menjadi masalah untuk elemen berukuran dinamis. Perhatikan bahwa nilai awalnya adalah 0, jadi saya masih menganggap itu autosecara umum lebih berguna.
George Marian
4

Saya memiliki masalah serupa tetapi penyebabnya adalah karena saya memiliki margin 40px di bagian bawah halaman, jadi baris terakhir akan selalu tertutup meskipun ada ruang untuk itu di halaman terakhir. Bukan karena page-break-*perintah css apa pun . Saya memperbaikinya dengan menghapus margin pada cetakan dan itu berfungsi dengan baik. Hanya ingin menambahkan solusi saya jika ada orang lain yang memiliki sesuatu yang serupa!

AlexMorley-Finch
sumber
3

Dalam kasus saya, pengaturan lebar ke semua div membantu: 

.page-content div {
    width: auto !important;
    max-width: 99%;
}
Marjanus
sumber
3

Saya mengubah tampilan css dan properti lebar area cetak

#printArea{
    display:table;
    width:100%;
}
Luaskan cuplikan

Afshin Razaghi
sumber
2

Setelah berjuang dengan berbagai pengaturan dan ketinggian jeda halaman dan jutaan aturan CSS yang berbeda pada tag tubuh, saya akhirnya menyelesaikannya lebih dari setahun kemudian.

Saya memiliki div yang seharusnya menjadi satu-satunya halaman yang dicetak, tetapi saya mendapatkan beberapa halaman kosong setelahnya. Tag tubuh saya disetel ke visibility:hidden;tapi itu belum cukup. Elemen halaman yang tinggi secara vertikal masih membutuhkan 'ruang'. Jadi saya menambahkan ini di aturan CSS cetak saya:

#header, #menu, #sidebar{ height:1px; display:none;}

untuk menargetkan div tertentu dengan idnya yang berisi elemen tata letak halaman yang tinggi. Saya mengecilkan ketinggian dan kemudian menghapusnya dari tata letak. Tidak ada lagi halaman kosong. Bertahun-tahun kemudian saya dengan senang hati memberi tahu klien saya bahwa saya berhasil memecahkannya. Semoga ini bisa membantu seseorang.

Sherri
sumber
Ya kalau dipakai visibility: hidden;masih akan memakan tempat. Jika Anda menggunakan display: none;ruang akan dihapus. Pada saat itu Anda tidak perlu mengatur ketinggian secara khusus, cukup FYI.
chapeljuice
2

Chrome tampaknya memiliki bug di mana dalam situasi tertentu, menyembunyikan elemen pasca-pemuatan dengan display: tidak ada, menyisakan banyak ruang ekstra. Saya kira mereka menghitung tinggi dokumen sebelum dokumen selesai rendering. Chrome juga mengaktifkan 2 peristiwa perubahan media, dan tidak mendukung onbeforeprint, dll. Mereka pada dasarnya adalah pencetakan. Inilah solusi saya:

@media print {
    body {
        display: none;
    }
}

body.printing {
    display: block;
}

Anda memberi body class = "printing" pada doc siap, dan itu memungkinkan gaya cetak. Sistem ini memungkinkan modularisasi gaya cetak, dan pratinjau cetak dalam browser.

Dirigible
sumber
2 
.print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

Ini berhasil untuk saya.

tamu
sumber
1

Tambahkan css ini ke halaman yang sama untuk memperluas file css.

<style type="text/css">
   <!--
   html, body {
    height: 95%; 
    margin: 0 0 0 0;
     }
   -->
</style>
Mansour Alnasser
sumber
1

Saya mencoba semua solusi, ini berhasil untuk saya:

<style>
    @page {
        size: A4;
        margin: 1cm;
    }

    .print {
        display: none;
    }

    @media print {
        div.fix-break-print-page {
            page-break-inside: avoid;
        }

        .print {
            display: block;
        }
    }

    .print:last-child {
        page-break-after: auto;
    }
</style>
Paulo Weverton
sumber
1

Saya baru saja menemukan kasus di mana berubah dari

    </div>
    <script src="addressofjavascriptfile.js"></script>
</body>
</html>

untuk

        <script src="addressofjavascriptfile.js"></script>
    </div>
</body>
</html>

memperbaiki masalah ini.

Terry Horner
sumber
1

Anehnya pengaturan perbatasan transparan menyelesaikan ini untuk saya:

@media print {
  div {
    border: 1px solid rgba(0,0,0,0)
  }
}

Mungkin sudah cukup untuk mengatur perbatasan pada elemen kontainer. <- Untestet.

alexloehr.dll
sumber
0

Tidak ada jawaban yang berhasil dengan saya, tetapi setelah membaca semuanya, saya menemukan apa yang menjadi masalah dalam kasus saya.Saya memiliki 1 halaman Html yang ingin saya cetak tetapi mencetak dengan itu halaman kosong ekstra putih. Saya menggunakan AdminLTE a bootstrap 3 tema untuk halaman laporan untuk dicetak dan di dalamnya tag footer saya ingin menempatkan teks ini di kanan bawah halaman:

Dicetak oleh Tuan Seseorang

Saya menggunakan jquery untuk meletakkan teks itu daripada footer "Hak Salin" sebelumnya dengan

$("footer").html("Printed by Mr. Someone");

dan secara default di tema footer tag menggunakan kelas .main-footer yang memiliki atribut

padding: 15px;
border-top: 1px solid

yang menyebabkan ruang putih ekstra, jadi setelah mengetahui masalahnya, saya memiliki opsi berbeda, dan opsi terbaik adalah menggunakan 

$( "footer" ).removeClass( "main-footer" );

Hanya di halaman spesifik itu

Yousef Al-Hadhrami
sumber
0

Letakkan hal-hal yang Anda butuhkan pada halaman dalam div dan gunakan page-break-inside: hindari pada div itu. Div Anda akan tetap di satu halaman dan masuk ke halaman kedua atau ketiga jika diperlukan, tetapi div berikutnya, jika harus melakukan jeda halaman, harus dimulai di halaman berikutnya.

Rick Turner
sumber
0

Periksa apakah ada spasi setelah tag html di bagian bawah. Hapus spasi kosong di bawah ini membantu saya

Wahsei
sumber
0

Pertama, tiru lembar gaya cetak melalui alat pengembang browser Anda. Instruksi dapat ditemukan di sini .

Kemudian Anda akan ingin mencari bantalan ekstra, margin, batas, dll yang dapat memperpanjang dimensi halaman Anda melebihi 8,5in x 11in. Berikan perhatian khusus pada spasi karena ini tidak mungkin dideteksi melalui dialog pratinjau cetak. Jika ada spasi kosong yang seharusnya tidak ada di sana, klik kanan dan memeriksa elemen di bawah kursor akan menyoroti masalah (kecuali jika margin menyebabkannya).

Kevin Beal
sumber