baskı sırasında fazladan boş sayfa nasıl önlenir?

90

CSS özelliği kullanıyorum,

Ben kullanırsanız page-break-after: always;=> Ekstra bir boş sayfa önce yazdırır

Kullanırsam page-break-before: always;=> Sonrasında fazladan boş bir sayfa yazdırır. Bundan nasıl kaçınılır?

<!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
kaynak

baskı sınıfının yüksekliği nedir?

— juankysmith

1

Bu, faturalar için olduğu için, öğe sayısına göre yükseklik dinamik olacaktır.

— Angelin Nadar

6

Soğuk savaşta bunu böyle yaptık:<div>This page intentionally left blank.</div>

— Bob Stein

72

Belki ekleyebilirsin

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

bu nedenle son printöğe fazladan sayfa sonunu almayacaktır.

Bir tarayıcının zavallılığını hedefliyorsanız, son çocuk seçicisinin IE8'de desteklenmediğini unutmayın.

— AKX
kaynak

89

"IE'de desteklenmiyor" olması, IE'nin dafault özelliğidir

— Angelin Nadar

1

Diğer okuyucular için bu benim için işe yaramadı, ancak aşağıdaki HTML ve gövde öğelerinde otomatik yükseklik ayarlama cevabı bir cazibe gibi çalıştı.

— Cody

102

Bunu denedin mi

@media print {
    html, body {
        height: 99%;    
    }
}

— giannis.epp
kaynak

2

Benim için çalıştı: @media print {html {height: 99%; }}, oluşturulan belge daha büyük gövdeyle

— Gustavo

11

Benim durumumda, Zurb Vakfı html ve body ayarını yapıyordu height: 100%. Bunuheight: auto

— zacharydl

5

@ Zacharydl'ın yorumunun benim için işe yaradığını ve ayrıca bunun height: auto;daheight: 99%;

— jontsai'den

Bu sorunu yaşadım, çünkü bir kaydırma çubuğunu her zaman göstermeye zorlamak için html yüksekliğini% 101'e ayarlıyordum. (Sayfalar arasındaki sıçramayı ortadan kaldırır) - yani evet, baskı stilinde% 100 yükseklik lezzetli bir düzeltmedir! - şerefe.

— rob_james

@rob_james% 101'i kullanmaktan kaçınmak için overflow-y'yi ayarlayabilirsiniz: scroll; kaydırma çubuğunun her zaman görünür olması için

— user161592

46

Burada açıklanan çözüm bana yardımcı oldu (web arşiv bağlantısı ).

Her şeyden önce, yeni bir sayfanın eklenmesine neyin sebep olduğunu görmek için tüm öğelere kenarlık ekleyebilirsiniz (belki bazı kenar boşlukları, dolgular, vb.).

div { border: 1px solid black;}

Ve çözümün kendisi aşağıdaki stilleri eklemekti:

html, body { height: auto; }

— Michael Radionov
kaynak

9

Vay canına, bu benim eski blogumdu! Ben de aynı sorunu yaşadım ve bunu bir zamanlar küçük olan dünyayı zaten düzelttiğimi düşünüyordum

— Miguel Stevens

3

div kenarlığı eklemek için artı 1.

— Iftikhar Ali Ansari

Sınırı eklemek harika bir fikirdi! Sayfa sarmalayıcımda fazladan bir sayfanın görünmesine neden olan minimum yükseklik ayarı olduğunu fark etmeme yardımcı oldu. Bir süredir buna karşı kafamı vuruyordum. Çok teşekkür ederim!

— erichunt

34

Bunların hiçbiri işe yaramazsa, bunu deneyin

@media print {

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

}

100vh olduğundan emin olun

— Bryan Chan
kaynak

4

yüksekliği 100vh olarak ayarlamak sorunumu çözdü. Teşekkürler

— user2398069

1

"@media print {* {overflow: hidden! important;}}" benim için çok önemli.

— shinriyo

1

Nihayet belirsiz bir soruna bir cevap! OSX'teki Safari tamamen boş bir sayfa gösterirken, Chrome, FF ve Edge önizlemeyle iyi durumda. Çok teşekkürler!

— pop

1

Yüksekliğin 100vh olarak ayarlanması, birden fazla sayfayı yüklemesini engelliyor gibi görünüyor, böylece belgenin birden fazla sayfası varsa, önizlemeye yalnızca ilk sayfa yüklenir

— Filipe

8

Bu benim için çalışıyor

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

— Lam
kaynak

Bu benim için diğerlerinden daha iyi çalıştı! Burada biraz daha fazla bilgi: blog.jonesed.net/2012/10/…

— RemarkLima

5

Yalnızca CSS kullanmak ve sayfa sonundan kaçınmak istiyorsanız şunu kullanın:

.print{
    page-break-after: avoid;

}

Sayfalı medyaya bir göz atın

PageBreakBefore ve pageBreakAfter için komut dosyası eşdeğerlerini kullanabilirsiniz, bunların değerlerini dinamik olarak atayın. Örneğin, ziyaretçilerinize özel sayfa sonları uygulamak yerine, bunu isteğe bağlı hale getirmek için bir komut dosyası oluşturabilirsiniz. Burada, üstbilgilerde (h2) ve yazıcının kendi takdirine bağlı olarak (varsayılan) sayfayı dilimleme arasında geçiş yapan bir onay kutusu oluşturacağım:

<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
 }

Bunu kullanan bir örnek için burayı tıklayın . Komut dosyası içindeki H2'yi P veya DIV gibi başka bir etiketle değiştirebilirsiniz.

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

— bilash.saha
kaynak

4

display:nonebaskılar için olmayan diğer tüm öğeler için ayarlayın . ayarı visibility:hiddenonları gizli tutacaktır, ancak hepsi hala oradadır ve onlar için yer açmıştır. boş sayfa bu gizli öğeler içindir.

— Janaka R Rajapaksha
kaynak

Thx, dinamik içeriğiniz varsa, :notseçiciyi kullanarak her şeyi display: noneyazdırma sınıfına değil, örneğinbody > :not(.print) { display: none !important; }

— Putzi San

4

Nedenini bilmiyorum (şimdilik) ama bu yardımcı oldu:

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

Umarım birisi sorunla savaşırken saçını kurtarır ...;)

— Adam G.
kaynak

4

Görünüşe göre, vücut etiketinin w / e nedeni için çok büyük olduğu düşünülen bir yüksekliğe sahip olması muhtemel tema ile birçok olası neden var.

Benim nedenim: min-height: 100%temel bir stil sayfasında.

Benim çözümüm: min-height: autobir @media printdirektifte.

Not, autoPhpStorm'a göre doğru bir değer gibi görünmüyordu. Ancak, Mozilla'nın minimum yükseklik ile ilgili belgelerine göre doğrudur :

auto
Diğer düzenler için 0'dan daha makul bir varsayılan sağlayan, esnek öğeler için varsayılan minimum boyut.

— George Marian
kaynak

Ben sadece 'min-height: initial! Önemli;' ve benim için çalıştı.

— Siby Thomas

@SibyThomas Mümkünse! Önemli beyanlardan kaçınıyorum. Özellikleri geçersiz kılmak işleri daha da zorlaştırır. initialDinamik olarak boyutlandırılmış elemanlar için sorunlu olacağını varsaydığım için bunu düşünmedim bile . Başlangıç değerinin 0 olduğuna dikkat edin, bu nedenle yine de autobunun genellikle daha kullanışlı olduğunu varsayıyorum .

— George Marian

4

Benzer bir sorun yaşadım, ancak bunun nedeni sayfanın altında 40px'lik bir kenar boşluğum olmasıydı, bu nedenle son sayfada yer olsa bile son satır her zaman kaydırılırdı. Herhangi bir page-break-*css komutu yüzünden değil . Baskıdaki kenar boşluğunu kaldırarak düzelttim ve iyi çalıştı. Başka birinin benzer bir şeye sahip olma ihtimaline karşı çözümümü eklemek istedim!

— AlexMorley-Finch
kaynak

3

Benim durumumda genişliği tüm div'lere ayarlamak yardımcı oldu:

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

— Marjanus
kaynak

3

Baskı alanının css görünümünü ve genişlik özelliğini değiştirdim

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

Snippet'i genişlet

— Afshin Razaghi
kaynak

2

Çeşitli sayfa sonu ayarları ve yükseklikleri ve gövde etiketinde bir milyon farklı CSS kuralıyla uğraştıktan sonra, sonunda bir yıl sonra çözdüm.

Sayfada yazdırılan tek şey olması gereken bir div'im var, ancak ondan sonra birkaç boş sayfa alıyordum. Vücut etiketim olarak ayarlandı visibility:hidden;ama bu yeterli değildi. Dikey olarak uzun sayfa öğeleri hala 'yer' kaplar. Ben de bunu baskı CSS kurallarıma ekledim:

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

uzun sayfa düzeni öğeleri içeren kimlikleriyle belirli div'leri hedeflemek için. Yüksekliği küçülttüm ve sonra onları düzenden çıkardım. Artık boş sayfa yok. Yıllar sonra müvekkilime kırdığımı söylemekten mutluyum. Umarım bu birine yardımcı olur.

— Sherri
kaynak

Evet, kullanırsanız visibility: hidden;, yine de yer kaplayacaktır. Boşluğu kullanırsanız display: none;kaldırılacaktır. Bu noktada, yüksekliği özel olarak ayarlamanıza gerek kalmayacak, sadece FYI.

— chapeljuice

2

Görünüşe göre Chrome'da, belirli durumlarda, öğelerin ekranla birlikte yüklendikten sonra gizlenmesinin bir hatası var gibi görünüyor: hiçbiri, geride çok fazla alan bırakmıyor. Belgenin işlenmesi tamamlanmadan önce belge yüksekliğini hesapladıklarını tahmin ediyorum. Chrome ayrıca 2 medya değişiklik olayını ateşler ve onbeforeprint vb. Desteklemez. Bunlar temelde yazdırma işlemidir. İşte benim çözümüm:

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

body.printing {
    display: block;
}

Body class = "printing" belgesine hazır olarak verirsiniz ve bu, yazdırma stillerini etkinleştirir. Bu sistem, baskı stillerinin modülerleştirilmesine ve tarayıcı içi baskı önizlemeye izin verir.

— Dirigible
kaynak

2

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

Bu benim için çalıştı.

— misafir
kaynak

1

Css dosyasını genişletmek için bu css'i aynı sayfaya ekleyin.

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

— Mansour Alnasser
kaynak

1

Tüm çözümleri denedim, bu benim için çalışıyor:

<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
kaynak

1

Sadece değiştiği bir durumla karşılaştım

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

-e

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

bu sorunu çözdü.

— Terry Horner
kaynak

1

Garip bir şekilde şeffaf bir sınır belirlemek bunu benim için çözdü:

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

Belki de konteynır elemanına sınır koymak yeterli olacaktır. <- Testsiz.

— Alexloehr
kaynak

0

Cevapların hiçbiri benimle çalışmadı, ancak hepsini okuduktan sonra, benim durumumda sorunun ne olduğunu anladım, yazdırmak istediğim 1 Html sayfam var ama onunla fazladan beyaz bir boş sayfa yazdırıyordu. Raporun sayfasının yazdırılması için AdminLTE bir önyükleme 3 teması ve bunun içinde bu metni sayfanın sağ altına yerleştirmek istedim altbilgi etiketini kullanıyorum:

Bay Birisi tarafından basılmıştır

Bu metni önceki "Kopyalama Hakları" altbilgisi yerine jquery kullanarak

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

ve temada varsayılan olarak etiket altbilgisi özniteliklere sahip .main-footer sınıfını kullanır

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

bu fazladan bir beyaz alana neden oldu, bu yüzden sorunu öğrendikten sonra farklı seçeneklerim vardı ve en iyi seçenek kullanmaktı

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

Sadece o belirli sayfada

— Yousef Al-Hadhrami
kaynak

0

İhtiyaç duyduğunuz şeyleri bir sayfaya bir div içine koyun ve sayfa sonu özelliğini kullanın: bu div'den kaçının. Div'iniz bir sayfada kalacak ve gerekirse ikinci veya üçüncü bir sayfaya gidecek, ancak bir sonraki bölüm, sayfa sonu yapması gerekirse, sonraki sayfadan başlamalıdır.

— Rick Turner
kaynak

0

Altta html etiketinden sonra herhangi bir beyaz boşluk olup olmadığını kontrol edin. Aşağıdaki tüm boşlukları kaldır bana yardımcı oldu

— Wahsei
kaynak

0

Öncelikle, tarayıcınızın geliştiricileriyle yazdırma stil sayfasını taklit edin. Talimatlar burada bulunabilir .

Ardından, sayfalarınızın boyutlarını 8,5 inç x 11 inç'in ötesine genişletebilecek ekstra dolgu, kenar boşluğu, kenarlıklar vb. Aramak isteyeceksiniz. Beyaz boşluğa özellikle dikkat edin, çünkü bunun baskı önizleme iletişim kutusu aracılığıyla tespit edilmesi imkansız olacaktır. Orada olmaması gereken boşluk varsa, imlecin altındaki öğeyi sağ tıklayıp incelemek sorunu vurgulamalıdır (buna neden olan bir kenar boşluğu olmadığı sürece).

— Kevin Beal
kaynak