Wie vermeide ich zusätzliche leere Seiten am Ende beim Drucken?

85

Ich verwende eine CSS-Eigenschaft.

Wenn ich page-break-after: always;=> verwende, wird zuvor eine zusätzliche leere Seite gedruckt

Wenn ich page-break-before: always;=> verwende, wird danach eine zusätzliche leere Seite gedruckt. Wie vermeide ich das?

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

Wie hoch ist die Druckklasse?

Juankysmith

1

Da dies für Rechnungen gilt, wird die Höhe gemäß der Anzahl der Artikel dynamisch sein.

Angelin Nadar

4

So haben wir es im Kalten Krieg gemacht:<div>This page intentionally left blank.</div>

Bob Stein

70

Sie könnten vielleicht hinzufügen

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

Das letzte printElement erhält also keinen zusätzlichen Seitenumbruch.

Beachten Sie, dass der Selektor: last-child in IE8 nicht unterstützt wird, wenn Sie auf das Elend eines Browsers abzielen.

AKX
quelle

85

Es ist in Ordnung, da "Nicht im IE unterstützt" die Standardfunktion von IE

Angelin Nadar

Für andere Leser hat dies bei mir nicht funktioniert, aber die folgende Antwort zum Festlegen der automatischen Höhe für HTML- und Körperelemente hat wie ein Zauber funktioniert.

Cody

101

Hast du das versucht?

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

giannis.epp
quelle

2

Für mich gearbeitet: @media print {html {Höhe: 99%; }}, mit Körper war das erstellte Dokument größer

Gustavo

10

In meinem Fall hat die Zurb Foundation HTML und Body auf eingestellt height: 100%. Ich konnte dies mitheight: auto

zacharydl

4

Bestätigen, dass @ zacharydls Kommentar für mich funktioniert, und das height: auto;ist auch eleganter alsheight: 99%;

jontsai

Ich hatte dieses Problem, weil ich die HTML-Höhe auf 101% eingestellt habe, um zu erzwingen, dass eine Bildlaufleiste immer angezeigt wird. (Beseitigt den Sprung zwischen den Seiten) - also ja, 100% Höhe im Druckstil ist eine leckere Lösung! - Prost.

Rob_James

@rob_james Um die Verwendung von 101% zu vermeiden, können Sie overflow-y festlegen: scroll; um immer die Bildlaufleiste sichtbar zu haben

user161592

46

Die hier beschriebene Lösung hat mir geholfen ( Webarchiv-Link ).

Zunächst können Sie allen Elementen einen Rahmen hinzufügen, um zu sehen, warum eine neue Seite angehängt wird (möglicherweise einige Ränder, Auffüllungen usw.).

div { border: 1px solid black;}

Die Lösung selbst bestand darin, die folgenden Stile hinzuzufügen:

html, body { height: auto; }

Mikhail Radionov
quelle

8

Wow das war mein alter Blog! Ich hatte gerade das gleiche Problem und dachte, ich hätte diese kleine Welt schon einmal

Miguel Stevens

3

plus 1 zum Hinzufügen eines Div-Randes.

Iftikhar Ali Ansari

Das Hinzufügen der Grenze war eine großartige Idee !! Es half mir zu erkennen, dass auf meinem Seitenumbruch eine Mindesthöhe eingestellt war, die dazu führte, dass eine zusätzliche Seite angezeigt wurde. Ich schlug eine Weile mit dem Kopf dagegen. Ich danke dir sehr!

Erichunt

30

Wenn keines dieser Verfahren funktioniert, versuchen Sie dies

@media print {

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

}

Stellen Sie sicher, dass es 100vh ist

Bryan Chan
quelle

4

Das Einstellen der Höhe auf 100 VH löste mein Problem. Danke

user2398069

1

"@media print {* {Überlauf: versteckt! wichtig;}}" ist für mich sehr wichtig.

Shinriyo

1

Endlich eine Antwort auf ein obskures Problem! Safari unter OSX zeigte eine völlig leere Seite, während Chrome, FF und Edge mit der Vorschau gut zurechtkamen. Vielen Dank!

Pop

Wenn die Höhe auf 100 VH eingestellt ist, wird anscheinend nicht mehr als eine Seite geladen, sodass bei einem Dokument mit mehr als einer Seite nur die erste Seite in der Vorschau

Filipe

8

Das funktioniert bei mir

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

Lam
quelle

Das hat bei mir besser funktioniert als bei den anderen! Weitere Infos hier: blog.jonesed.net/2012/10/…

RemarkLima

5

Wenn Sie nur CSS verwenden und Seitenumbrüche vermeiden möchten, verwenden Sie

.print{
    page-break-after: avoid;

}

Schauen Sie sich ausgelagerte Medien an

Sie können Skriptäquivalente für pageBreakBefore und pageBreakAfter verwenden und deren Werte dynamisch zuweisen. Anstatt Ihren Besuchern benutzerdefinierte Seitenumbrüche aufzuzwingen, können Sie beispielsweise ein Skript erstellen, um dies optional zu machen. Hier erstelle ich ein Kontrollkästchen, das zwischen dem Schneiden der Seite in den Kopfzeilen (h2) und dem Ermessen des Druckers (Standard) umschaltet:

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

Klicken Sie hier für ein Beispiel, das dies verwendet. Sie können H2 im Skript durch ein anderes Tag wie P oder DIV ersetzen.

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

bilash.saha
quelle

4

Ich weiß (bis jetzt) nicht warum, aber dieser hat geholfen:

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

Hoffe, jemand wird seine Haare retten, während er mit dem Problem kämpft ...;)

Adam G.
quelle

3

Set display:nonefür alle anderen Elemente, die nicht für Drucke bestimmt sind. Die Einstellung visibility:hiddenhält sie versteckt, aber sie sind alle noch da und haben Platz für sie genommen. Die leere Seite ist für diese versteckten Elemente.

Janaka R Rajapaksha
quelle

3

Es scheint, dass es viele mögliche Ursachen gibt, wobei das wahrscheinliche Thema darin besteht, dass das Body-Tag eine Höhe hat, die aus irgendeinem Grund als zu groß angesehen wird.

Meine Ursache: min-height: 100%in einem Basis-Stylesheet.

Meine Lösung: min-height: autoin einer @media printRichtlinie.

Beachten Sie, dass autoes laut PhpStorm kein korrekter Wert zu sein schien. Laut Mozillas Dokumentation zur Mindesthöhe ist dies jedoch korrekt :

auto
Die Standard-Mindestgröße für Flex-Elemente, die für andere Layouts einen vernünftigeren Standardwert als 0 bietet.

George Marian
quelle

Ich habe gerade 'min-height: initial! Important;' und es hat bei mir funktioniert.

Siby Thomas

@SibyThomas Ich vermeide die! Wichtige Erklärung wenn möglich. Dies erschwert das Überschreiben von Eigenschaften. Ich habe nicht einmal darüber nachgedacht, initialda ich davon ausgegangen bin, dass es für dynamisch dimensionierte Elemente problematisch ist. Beachten Sie, dass der Anfangswert 0 ist, daher gehe ich immer noch davon aus, dass dies autoim Allgemeinen nützlicher ist.

George Marian

3

In meinem Fall hat das Einstellen der Breite für alle Divs geholfen:

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

Marjanus
quelle

3

Ich habe die CSS-Anzeige und die Breite des Druckbereichs geändert

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

Erweitern Sie das Snippet

Afshin Razaghi
quelle

3

Ich hatte ein ähnliches Problem, aber die Ursache war, dass ich am unteren Rand der Seite einen Rand von 40 Pixel hatte, sodass die allerletzte Zeile immer umbrochen wurde, selbst wenn auf der letzten Seite Platz dafür war. Nicht wegen irgendeiner Art von page-break-*CSS-Befehl. Ich habe das Problem behoben, indem ich den Rand beim Drucken entfernt habe, und es hat gut funktioniert. Ich wollte nur meine Lösung hinzufügen, falls jemand anderes etwas Ähnliches hat!

AlexMorley-Finch
quelle

2

Nachdem ich mit verschiedenen Einstellungen und Höhen für Seitenumbrüche und einer Million verschiedener CSS-Regeln für das Body-Tag zu kämpfen hatte, löste ich es schließlich über ein Jahr später.

Ich habe ein Div, das das einzige auf der Seite sein soll, das gedruckt wird, aber ich habe danach mehrere leere Seiten bekommen. Mein Body-Tag ist auf eingestellt, visibility:hidden;aber das war nicht genug. Vertikal hohe Seitenelemente nehmen immer noch Platz ein. Also habe ich dies in meine Print-CSS-Regeln aufgenommen:

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

um bestimmte Divs anhand ihrer IDs anzuvisieren, die große Seitenlayoutelemente enthalten. Ich habe die Höhe verkleinert und sie dann aus dem Layout entfernt. Keine leeren Seiten mehr. Jahre später freue ich mich, meinem Kunden mitteilen zu können, dass ich es geknackt habe. Hoffe das hilft jemandem.

Sherri
quelle

Ja, wenn Sie es verwenden, nimmt visibility: hidden;es immer noch Platz ein. Wenn Sie display: none;das Leerzeichen verwenden, wird es entfernt. An diesem Punkt müssen Sie die Höhe nicht speziell einstellen, sondern nur zu Ihrer Information.

Kapellensaft

2

Chrome scheint einen Fehler zu haben, bei dem in bestimmten Situationen das Ausblenden von Elementen nach dem Laden mit der Anzeige: Keine, viel zusätzlichen Platz hinterlässt. Ich würde vermuten, dass sie die Dokumenthöhe berechnen, bevor das Dokument gerendert ist. Chrome löst auch 2 Medienwechselereignisse aus und unterstützt onbeforeprint usw. nicht. Sie sind im Grunde genommen das Drucken. Hier ist meine Problemumgehung:

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

body.printing {
    display: block;
}

Sie geben body class = "Drucken" auf doc ready an, und das aktiviert die Druckstile. Dieses System ermöglicht die Modularisierung von Druckstilen und die Druckvorschau im Browser.

Luftschiff
quelle

1

Fügen Sie dieses CSS derselben Seite hinzu, um die CSS-Datei zu erweitern.

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

Alnassre
quelle

1

Ich habe alle Lösungen ausprobiert, das funktioniert bei mir:

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

1

Ich bin gerade auf einen Fall gestoßen, bei dem ein Wechsel von

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

zu

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

Dieses Problem wurde behoben.

Terry Horner
quelle

1

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

Das hat bei mir funktioniert.

Gast
quelle

1

Das seltsame Setzen eines transparenten Rahmens löste dies für mich:

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

Möglicherweise reicht es aus, den Rand für das Containerelement festzulegen. <- Nicht testen.

alexloehr
quelle

0

Keine der Antworten funktionierte mit mir, aber nachdem ich alle gelesen hatte, fand ich heraus, was das Problem in meinem Fall war. Ich habe 1 HTML-Seite, die ich drucken möchte, aber es wurde eine zusätzliche weiße leere Seite damit gedruckt. Ich verwende AdminLTE, ein Bootstrap 3-Thema für die Seite des Berichts, das gedruckt werden soll, und darin das Fußzeilentag, mit dem ich diesen Text unten rechts auf der Seite platzieren wollte:

Gedruckt von Mr. Someone

Ich habe jquery verwendet, um diesen Text anstelle der vorherigen Fußzeile "Copy Rights" mit zu setzen

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

und standardmäßig verwendet die Tag-Fußzeile im Thema die Klasse .main-footer mit den Attributen

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

Das verursachte einen zusätzlichen Leerraum. Nachdem ich das Problem gekannt hatte, hatte ich verschiedene Optionen, und die beste Option war die Verwendung

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

Nur auf dieser speziellen Seite

Yousef Al-Hadhrami
quelle

0

Fügen Sie das benötigte Material auf eine Seite in einem Div ein und verwenden Sie den Seitenumbruch: Vermeiden Sie dieses Div. Ihr Div bleibt auf einer Seite und wechselt bei Bedarf auf eine zweite oder dritte Seite. Das nächste Div sollte jedoch auf der nächsten Seite beginnen, falls es einen Seitenumbruch durchführen muss.

Rick Turner
quelle

0

Überprüfen Sie, ob nach dem HTML-Tag unten ein Leerzeichen vorhanden ist. Entfernen Sie alle Leerzeichen unten, die mir geholfen haben

Wahsei
quelle

Wie vermeide ich zusätzliche leere Seiten am Ende beim Drucken?

Antworten: