come evitare pagine vuote extra alla fine durante la stampa?

91

Sto usando una proprietà CSS,

Se uso page-break-after: always;=> Stampa prima una pagina vuota in più

Se uso page-break-before: always;=> Stampa una pagina vuota in più dopo. Come evitarlo?

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

qual è l'altezza della classe di stampa?

— juankysmith

1

Poiché questo è per le fatture, l'altezza sarà dinamica in base al numero di articoli.

— Angelin Nadar

6

Ecco come abbiamo fatto durante la guerra fredda:<div>This page intentionally left blank.</div>

— Bob Stein il

72

Potresti forse aggiungere

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

così l'ultimo printelemento non avrà l'interruzione di pagina extra.

Nota che il selettore: last-child non è supportato in IE8, se stai prendendo di mira quel disgraziato di un browser.

— AKX
fonte

89

Va bene perché "Non supportato in IE" è la funzione predefinita di IE

— Angelin Nadar

1

Per altri lettori, questo non ha funzionato per me, ma la risposta di seguito relativa all'impostazione dell'altezza automatica sull'HTML e sugli elementi del corpo ha funzionato a meraviglia.

— Cody

102

Hai provato questo?

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

— giannis.epp
fonte

2

Per me ha funzionato: @media print {html {height: 99%; }}, con il corpo del documento creato era più grande

— Gustavo

11

Nel mio caso, la Zurb Foundation stava impostando html e body su height: 100%. Sono stato in grado di ignorare questo conheight: auto

— zacharydl

5

Confermando che il commento di @ zacharydl funziona per me, e anche questo height: auto;è più elegante diheight: 99%;

— jontsai

Ho avuto questo problema, perché stavo impostando l'altezza dell'html al 101% per forzare la visualizzazione sempre di una barra di scorrimento. (Elimina il salto tra le pagine) - quindi sì, l'altezza del 100% nello stile di stampa è una soluzione gustosa! - Saluti.

— rob_james,

@rob_james per evitare di usare il 101%, puoi impostare overflow-y: scroll; per avere sempre la barra di scorrimento visibile

— user161592

47

La soluzione qui descritta mi ha aiutato ( link webarchive ).

Prima di tutto, puoi aggiungere un bordo a tutti gli elementi per vedere cosa causa l'aggiunta di una nuova pagina (forse alcuni margini, imbottiture, ecc.).

div { border: 1px solid black;}

E la soluzione stessa era aggiungere i seguenti stili:

html, body { height: auto; }

— Michael Radionov
fonte

9

Wow, questo era il mio vecchio blog! Ho appena avuto lo stesso problema e stavo pensando di averlo già risolto una volta ^^ small world

— Miguel Stevens

3

più 1 per l'aggiunta del bordo div.

— Iftikhar Ali Ansari,

Aggiungere il bordo è stata un'ottima idea !! Mi ha aiutato a capire che c'era un'altezza minima impostata sul mio wrapper di pagina che faceva apparire una pagina in più. Stavo sbattendo la testa contro questo per un po '. Grazie mille!

— erichunt

34

se nessuno di questi funziona, prova questo

@media print {

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

}

assicurati che sia 100vh

— Bryan Chan
fonte

4

l'impostazione dell'altezza a 100 vh ha risolto il mio problema. Grazie

— user2398069

1

"@media print {* {overflow: hidden! important;}}" è molto importante per me.

— shinriyo

1

Finalmente una risposta a un oscuro problema! Safari su OSX mostrava una pagina completamente vuota mentre Chrome, FF e Edge erano tutti buoni con l'anteprima. Molte grazie!

— pop il

1

Avere l'altezza impostata su 100vh sembra impedirgli di caricare più di una pagina, in modo che se il documento ha più di una pagina solo la prima pagina viene caricata nell'anteprima

— Filipe

8

Questo funziona per me

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

— Lam
fonte

Questo ha funzionato per me meglio del resto! Qualche info in più qui: blog.jonesed.net/2012/10/…

— RemarkLima

5

Se vuoi solo usare CSS e vuoi evitare interruzioni di pagina, usa

.print{
    page-break-after: avoid;

}

Dai un'occhiata ai media a pagine

È possibile utilizzare equivalenti di scripting per pageBreakBefore e pageBreakAfter, assegnando dinamicamente i rispettivi valori. Ad esempio, invece di imporre interruzioni di pagina personalizzate ai tuoi visitatori, puoi creare uno script per renderlo facoltativo. Qui creerò una casella di controllo che alterna tra affettare la pagina nelle intestazioni (h2) e a discrezione della stampante (impostazione predefinita):

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

Fare clic qui per un esempio che utilizza questo. Puoi sostituire H2 all'interno dello script con un altro tag come P o DIV.

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

— bilash.saha
fonte

4

impostato display:noneper tutti gli altri elementi che non sono per le stampe. l'impostazione visibility:hiddenli terrà nascosti, ma sono ancora tutti lì e hanno preso spazio per loro. la pagina vuota è per quegli elementi nascosti.

— Janaka R Rajapaksha
fonte

Grazie, se hai un contenuto dinamico puoi usare il :notselettore per impostare tutto display: nonema non la classe di stampa, comebody > :not(.print) { display: none !important; }

— Putzi San

4

Non so (per ora) perché, ma questo ha aiutato:

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

Spero che qualcuno gli salverà i capelli mentre combatte con il problema ...;)

— Adam G.
fonte

4

Sembra che ci siano molte possibili cause, con il probabile tema che l'etichetta del corpo finisca con un'altezza che è considerata troppo grande per w / e motivo.

La mia causa: min-height: 100%in un foglio di stile di base.

La mia soluzione: min-height: autoin una @media printdirettiva.

Nota, autonon sembra essere un valore corretto, secondo PhpStorm. Tuttavia, è corretto secondo la documentazione di Mozilla su min-height :

auto
La dimensione minima predefinita per gli elementi flessibili, fornendo un valore predefinito più ragionevole di 0 per altri layout.

— George Marian
fonte

Ho appena messo "min-height: initial! Important;" e ha funzionato per me.

— Siby Thomas

@SibyThomas Evito la! Dichiarazione importante se possibile. Rende le cose più difficili per l'override delle proprietà. Non ho nemmeno preso in considerazione initialpoiché pensavo che sarebbe stato problematico per elementi di dimensioni dinamiche. Nota che il valore iniziale è 0, quindi presumo che autosia generalmente più utile.

— George Marian

4

Ho avuto un problema simile, ma la causa era perché avevo 40 px di margine nella parte inferiore della pagina, quindi l'ultima riga andava sempre a capo anche se c'era spazio per essa nell'ultima pagina. Non a causa di alcun tipo di page-break-*comando CSS. Ho risolto rimuovendo il margine sulla stampa e ha funzionato bene. Volevo solo aggiungere la mia soluzione nel caso qualcun altro avesse qualcosa di simile!

— AlexMorley-Finch
fonte

3

Nel mio caso l'impostazione della larghezza su tutti i div ha aiutato:

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

— Marjanus
fonte

3

Ho cambiato la visualizzazione CSS e la proprietà di larghezza dell'area di stampa

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

Espandi lo snippet

— Afshin Razaghi
fonte

2

Dopo aver lottato con varie impostazioni e altezze di interruzione di pagina e un milione di varie regole CSS sul tag body, ho finalmente risolto il problema più di un anno dopo.

Ho un div che dovrebbe essere l'unica cosa sulla pagina che viene stampata, ma ho ottenuto diverse pagine vuote dopo. Il tag del mio corpo è impostato su, visibility:hidden;ma non è stato sufficiente. Gli elementi della pagina verticalmente alti occupano ancora "spazio". Quindi ho aggiunto questo nelle mie regole CSS di stampa:

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

per scegliere come target div specifici in base ai loro ID che contengono elementi di layout di pagina alti. Ho ridotto l'altezza e poi le ho rimosse dal layout. Niente più pagine bianche. Anni dopo sono felice di dire al mio cliente che l'ho risolto. Spero che questo aiuti qualcuno.

— Sherri
fonte

Sì, se lo usi visibility: hidden;occuperà comunque spazio. Se usi display: none;lo spazio verrà rimosso. A quel punto non sarà necessario impostare specificamente l'altezza, solo FYI.

— Chapeljuice

2

Chrome sembra avere un bug in cui in determinate situazioni, nascondendo elementi post-caricamento con display: nessuno, lascia molto spazio extra dietro. Immagino che stiano calcolando l'altezza del documento prima che il documento sia terminato. Chrome attiva anche 2 eventi di modifica del supporto e non supporta onbeforeprint, ecc. Sono fondamentalmente l'ex di stampa. Ecco la mia soluzione alternativa:

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

body.printing {
    display: block;
}

Dai body class = "printing" su doc ready, e questo abilita gli stili di stampa. Questo sistema consente la modularizzazione degli stili di stampa e l'anteprima di stampa nel browser.

— Dirigibile
fonte

2

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

Questo ha funzionato per me.

— ospite
fonte

1

Aggiungi questo css alla stessa pagina per estendere il file css.

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

— Mansour Alnasser
fonte

1

Ho provato tutte le soluzioni, questo funziona per me:

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

1

Ho appena riscontrato un caso da cui cambiare

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

per

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

risolto questo problema.

— Terry Horner
fonte

1

Stranamente l'impostazione di un bordo trasparente ha risolto questo per me:

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

Forse sarà sufficiente impostare il bordo sull'elemento contenitore. <- Untestet.

— alexloehr
fonte

0

Nessuna delle risposte ha funzionato con me, ma dopo averle lette tutte, ho capito qual era il problema nel mio caso. Ho 1 pagina Html che voglio stampare ma stampa con essa una pagina bianca extra bianca. Sto usando AdminLTE un tema bootstrap 3 per la pagina del report da stampare e in esso il tag del piè di pagina ho voluto inserire questo testo in basso a destra della pagina:

Stampato da Mr. Someone

Ho usato jquery per inserire quel testo al posto del precedente piè di pagina "Diritti di copia" con

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

e per impostazione predefinita nel tema il tag footer utilizza la classe .main-footer che ha gli attributi

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

ciò ha causato uno spazio bianco extra, quindi dopo aver conosciuto il problema, avevo diverse opzioni e l'opzione migliore era usare

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

Proprio in quella pagina specifica

— Yousef Al-Hadhrami
fonte

0

Metti le cose che ti servono su una pagina in un div e usa page-break-inside: evita su quel div. Il tuo div rimarrà su una pagina e andrà su una seconda o terza pagina se necessario, ma il div successivo, se dovesse fare un'interruzione di pagina, dovrebbe iniziare nella pagina successiva.

— Rick Turner
fonte

0

Controlla se c'è uno spazio bianco dopo il tag html in basso. Rimuovere qualsiasi spazio vuoto qui sotto mi ha aiutato

— Wahsei
fonte

0

Innanzitutto, emula il foglio di stile di stampa tramite i devtools del tuo browser. Le istruzioni possono essere trovate qui .

Quindi ti consigliamo di cercare imbottitura extra, margine, bordi, ecc. Che potrebbero estendere le dimensioni delle tue pagine oltre 8,5 x 11 pollici. Prestare particolare attenzione agli spazi bianchi poiché sarà impossibile rilevarli tramite la finestra di dialogo dell'anteprima di stampa. Se è presente uno spazio vuoto che non dovrebbe essere presente, fare clic con il pulsante destro del mouse e ispezionare l'elemento sotto il cursore dovrebbe evidenziare il problema (a meno che non sia un margine a causarlo).

— Kevin Beal
fonte