it-swarm-id.com

bagaimana cara menghindari halaman kosong ekstra di akhir saat mencetak?

Saya menggunakan properti CSS,

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

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

<!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>
68
Angelin Nadar

Anda mungkin bisa menambahkan

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

jadi elemen print terakhir tidak akan mendapatkan istirahat halaman tambahan.

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

59
AKX

Sudahkah Anda mencoba ini?

@media print {
    html, body {
        height: 99%;    
    }
}
92
giannis.epp

Solusi yang dijelaskan di sini membantu saya ( tautan webarchive ).

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

div { border: 1px solid black;}

Dan solusinya sendiri adalah menambahkan gaya berikut:

html, body { height: auto; }
37
Michael Radionov

jika tidak ada yang berhasil, coba ini

@media print {

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

}

pastikan 100vh

20
Bryan Chan

Ini bekerja untuk saya

.print+.print {
    page-break-before: always;
}
8
Lam

Tidak tahu (seperti untuk saat ini) mengapa, tetapi 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 bertarung dengan masalah ...;)

4
Adam G.

Saya mengubah tampilan css dan properti lebar area cetak

#printArea{
    display:table;
    width:100%;
}
3
Afshin Razaghi

set display:none untuk semua elemen lain yang bukan untuk dicetak. pengaturan visibility:hidden akan membuat mereka tersembunyi, tetapi mereka semua masih ada dan telah mengambil ruang untuk mereka. halaman kosong adalah untuk elemen-elemen tersembunyi itu.

3

Jika Anda hanya ingin menggunakan CSS dan ingin menghindari page break maka gunakan

.print{
    page-break-after: avoid;

}

Lihatlah media halaman

Anda dapat menggunakan setara skrip untuk pageBreakBefore dan pageBreakAfter, tentukan secara dinamis nilainya. Misalnya, alih-alih memaksakan pemutusan halaman khusus pada pengunjung Anda, Anda dapat membuat skrip untuk menjadikan ini opsional. Di sini saya akan membuat kotak centang yang bergantian antara mengiris halaman di header (h2) dan atas kebijaksanaan 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

3
bilash.saha

Dalam kasus saya, pengaturan lebar untuk semua div membantu:

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

Setelah berjuang dengan berbagai pengaturan dan ketinggian halaman-break dan jutaan aturan CSS 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 tidak cukup. Elemen halaman yang tinggi secara vertikal masih memakan 'ruang'. Jadi saya menambahkan ini dalam aturan CSS cetak saya:

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

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

2
Sherri

Tampaknya ada banyak kemungkinan penyebabnya, dengan tema yang mungkin adalah bahwa tag tubuh berakhir dengan ketinggian yang dianggap terlalu besar untuk alasan apa pun.

Penyebab saya: min-height: 100% dalam lembar gaya dasar.

Solusi saya: min-height: auto di sebuah @media print arahan.

Catatan, auto tampaknya bukan nilai yang benar, menurut PhpStorm. Namun, ini benar menurut Mozilla dokumentasi pada ketinggian minimum :

mobil
Ukuran minimum default untuk item flex, memberikan default yang lebih masuk akal daripada 0 untuk layout lainnya.

2
George Marian

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.

1
Terry Horner

Chrome tampaknya memiliki bug di mana dalam situasi tertentu, menyembunyikan elemen post-load dengan tampilan: tidak ada, menyisakan banyak ruang ekstra. Saya kira mereka sedang menghitung tinggi dokumen sebelum dokumen selesai dirender. Chrome juga memecat 2 acara perubahan media, dan tidak mendukung cetak onbefor, dll. Mereka pada dasarnya adalah contoh dari pencetakan. Inilah solusi saya:

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

body.printing {
    display: block;
}

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

1
Dirigible

Saya mencoba semua solusi, ini bekerja 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>
1
Paulo Weverton
.print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

Ini berhasil untuk saya.

1
guest

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

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

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

0

Tidak ada jawaban yang bekerja dengan saya, tetapi setelah membaca semuanya, saya menemukan apa masalahnya dalam kasus saya, saya memiliki 1 halaman Html yang ingin saya cetak tetapi mencetak dengan 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 ke kanan bawah halaman:

Dicetak oleh Mr. Someone

Saya menggunakan jquery untuk menempatkan teks itu daripada catatan kaki "Hak Cipta" dengan

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

dan secara default pada tema, footer tag menggunakan class .main-footer yang memiliki atribut

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

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

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

Hanya di halaman spesifik itu

0

Anehnya mengatur 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.

0
Dr Hund