jak uniknąć dodatkowej pustej strony na końcu podczas drukowania?

88

Używam właściwości CSS,

Jeśli użyję page-break-after: always;=> Przed wydrukowaniem dodatkowej pustej strony

Jeśli użyję page-break-before: always;=> Drukuje dodatkową pustą stronę po. Jak tego uniknąć?

<!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
źródło

jaka jest wysokość klasy druku?

— juankysmith

1

Ponieważ dotyczy to faktur, wysokość będzie dynamiczna zgodnie z liczbą pozycji.

— Angelin Nadar

4

Tak to zrobiliśmy podczas zimnej wojny:<div>This page intentionally left blank.</div>

— Bob Stein

72

Możesz dodać

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

więc ostatni printelement nie otrzyma dodatkowego podziału strony.

Zwróć uwagę, że selektor: last-child nie jest obsługiwany w IE8, jeśli celujesz w tego łajdaka przeglądarki.

— AKX
źródło

88

Jest ok, ponieważ „Nieobsługiwane w IE” jest domyślną funkcją IE

— Angelin Nadar

Dla innych czytelników to nie zadziałało, ale poniższa odpowiedź dotycząca ustawiania automatycznej wysokości w HTML i elementach ciała działała jak urok.

— Cody

101

Czy próbowałeś tego?

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

— giannis.epp
źródło

2

U mnie pracował: @media print {html {wysokość: 99%; }}, z treścią utworzonego dokumentu był większy

— Gustavo

10

W moim przypadku Zurb Foundation ustawiała html i body na height: 100%. Udało mi się to zmienićheight: auto

— zacharydl

4

Potwierdzam, że komentarz @ zacharydl działa dla mnie, a także że height: auto;jest bardziej elegancki niżheight: 99%;

— jontsai

Miałem ten problem, ponieważ ustawiałem wysokość html na 101%, aby wymusić wyświetlanie paska przewijania. (Eliminuje przeskakiwanie między stronami) - więc tak, 100% wysokości w stylu druku to smaczna poprawka! - Twoje zdrowie.

— rob_james

@rob_james, aby uniknąć używania 101%, możesz ustawić overflow-y: scroll; aby pasek przewijania był zawsze widoczny

— user161592

46

Opisane tutaj rozwiązanie pomogło mi ( link do archiwum internetowego ).

Przede wszystkim możesz dodać obramowanie do wszystkich elementów, aby zobaczyć, co powoduje dołączenie nowej strony (może jakieś marginesy, wypełnienia itp.).

div { border: 1px solid black;}

A samym rozwiązaniem było dodanie następujących stylów:

html, body { height: auto; }

— Michael Radionov
źródło

9

Wow, to był mój stary blog! Miałem ten sam problem i myślałem, że już raz naprawiłem ten mały świat ^^ mały świat

— Miguel Stevens

3

plus 1 za dodanie obramowania div.

— Iftikhar Ali Ansari

Dodanie granicy to świetny pomysł !! Pomogło mi to zdać sobie sprawę, że w opakowaniu strony ustawiono minimalną wysokość, która powodowała pojawienie się dodatkowej strony. Przez chwilę waliłem w to głową. Dziękuję bardzo!

— erichunt

33

jeśli żadne z tych nie działa, spróbuj tego

@media print {

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

}

upewnij się, że jest to 100vh

— Bryan Chan
źródło

4

ustawienie wysokości na 100 vh rozwiązało mój problem. Dzięki

— user2398069

1

„@media print {* {overflow: hidden! important;}}” jest dla mnie bardzo ważne.

— shinriyo

1

Wreszcie odpowiedź na niejasny problem! Safari na OSX pokazywało zupełnie pustą stronę, podczas gdy Chrome, FF i Edge były w porządku z podglądem. Wielkie dzięki!

— pop

Ustawienie wysokości 100vh wydaje się powstrzymywać ładowanie więcej niż jednej strony, więc jeśli dokument ma więcej niż jedną stronę, tylko pierwsza strona jest ładowana na podglądzie

— Filipe

8

To działa dla mnie

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

— Chłostać
źródło

To działało lepiej niż reszta! Więcej informacji tutaj: blog.jonesed.net/2012/10/…

— RemarkLima

5

Jeśli chcesz używać tylko CSS i chcesz uniknąć łamania strony, użyj

.print{
    page-break-after: avoid;

}

Spójrz na stronicowane media

Możesz użyć odpowiedników skryptów dla pageBreakBefore i pageBreakAfter, dynamicznie przypisując ich wartości. Na przykład zamiast wymuszać niestandardowe podziały stron na odwiedzających, możesz utworzyć skrypt, który sprawi, że będzie to opcjonalne. Tutaj utworzę pole wyboru, które przełącza się między krojeniem strony według nagłówków (h2) i według własnego uznania drukarki (domyślnie):

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

Kliknij tutaj, aby zobaczyć przykład, który to wykorzystuje. Możesz zastąpić H2 wewnątrz skryptu innym znacznikiem, takim jak P lub DIV.

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

— bilash.saha
źródło

4

Nie wiem (na razie) dlaczego, ale ten pomógł:

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

Mam nadzieję, że ktoś uratuje mu włosy podczas walki z problemem ...;)

— Adam G.
źródło

4

Wygląda na to, że istnieje wiele możliwych przyczyn, a prawdopodobnie motywem jest to, że tag body kończy się na wysokości, która jest uważana za zbyt dużą z jakiegoś powodu.

Moja przyczyna: min-height: 100%w podstawowym arkuszu stylów.

Moje rozwiązanie: min-height: autow @media printdyrektywie.

Uwaga, autowedług PhpStorm nie wyglądała na poprawną wartość. Jednak jest to poprawne zgodnie z dokumentacją Mozilli dotyczącą minimalnej wysokości :

auto
Domyślny minimalny rozmiar elementów elastycznych, zapewniający rozsądniejszą wartość domyślną niż 0 dla innych układów.

— George Marian
źródło

Po prostu wstawiłem „min-height: początkowe! Ważne;” i to zadziałało dla mnie.

— Siby Thomas,

@SibyThomas Jeśli to możliwe, unikam! Ważnej deklaracji. Utrudnia to zastępowanie właściwości. Nawet się nie zastanawiałem, initialponieważ zakładałem, że będzie to problematyczne dla elementów o dynamicznych rozmiarach. Zauważ, że początkowa wartość to 0, więc nadal zakładam, że autojest to ogólnie bardziej przydatne.

— George Marian

3

zestaw display:nonena wszystkie pozostałe elementy, które nie są przeznaczone do nadruków. ustawienie visibility:hiddensprawi, że będą one ukryte, ale wszystkie nadal tam są i zajęły dla nich miejsce. pusta strona jest dla tych ukrytych elementów.

— Janaka R Rajapaksha
źródło

3

W moim przypadku pomogło ustawienie szerokości wszystkich div:

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

— Marjanus
źródło

3

Zmieniłem wyświetlanie css i właściwość szerokości obszaru drukowania

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

Rozwiń fragment

— Afshin Razaghi
źródło

3

Miałem podobny problem, ale przyczyną było to, że miałem 40 pikseli marginesu na dole strony, więc ostatni wiersz zawsze był zawijany, nawet jeśli było na niego miejsce na ostatniej stronie. Nie z powodu jakiegokolwiek page-break-*polecenia css. Naprawiłem, usuwając margines na wydruku i działało dobrze. Chciałem tylko dodać moje rozwiązanie na wypadek, gdyby ktoś inny miał coś podobnego!

— AlexMorley-Finch
źródło

2

Po zmaganiach z różnymi ustawieniami i wysokościami łamania stron oraz milionem różnych reguł CSS w tagu body, w końcu rozwiązałem to ponad rok później.

Mam element div, który powinien być jedyną drukowaną rzeczą na stronie, ale po nim było kilka pustych stron. Mój tag body jest ustawiony na, visibility:hidden;ale to nie wystarczyło. Elementy strony o wysokości pionowej nadal zajmują „miejsce”. Więc dodałem to w moich regułach CSS drukowania:

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

kierować reklamy na określone elementy DIV według ich identyfikatorów, które zawierają wysokie elementy układu strony. Zmniejszyłem wysokość, a następnie usunąłem je z układu. Nigdy więcej pustych stron. Po latach z radością mówię klientowi, że to złamałem. Mam nadzieję, że to komuś pomoże.

— Sherri
źródło

Tak, jeśli visibility: hidden;go używasz , nadal będzie zajmować miejsce. Jeśli użyjesz display: none;miejsca, zostanie usunięte. W tym momencie nie musisz specjalnie ustawiać wysokości, po prostu FYI.

— chapeljuice

2

Wygląda na to, że Chrome ma błąd polegający na tym, że w niektórych sytuacjach ukrywanie elementów po załadowaniu z wyświetlaczem: brak, pozostawia dużo dodatkowej przestrzeni. Wydaje mi się, że obliczają wysokość dokumentu, zanim dokument zostanie ukończony. Chrome uruchamia również 2 zdarzenia zmiany multimediów i nie obsługuje funkcji onbeforeprint, itp. Są one w zasadzie sposobem drukowania. Oto moje obejście:

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

body.printing {
    display: block;
}

Dajesz body class = "drukowanie" w dokumencie gotowym, a to włącza style drukowania. System ten pozwala na modularyzację stylów drukowania i podgląd wydruku w przeglądarce.

— Sterowiec
źródło

1

Dodaj ten plik CSS do tej samej strony, aby rozszerzyć plik CSS.

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

— alnassre
źródło

1

Wypróbowałem wszystkie rozwiązania, to działa dla mnie:

<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
źródło

1

Właśnie spotkałem się z przypadkiem, w którym zmieniłem się z

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

do

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

naprawiono ten problem.

— Terry Horner
źródło

1

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

To zadziałało dla mnie.

— Gość
źródło

1

Dziwne ustawienie przezroczystej granicy rozwiązało to dla mnie:

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

Może wystarczy ustawić obramowanie na elemencie kontenera. <- Untestet.

— alexloehr
źródło

0

Żadna z odpowiedzi nie zadziałała ze mną, ale po przeczytaniu wszystkich zorientowałem się, na czym polega problem w moim przypadku. Mam 1 stronę HTML, którą chcę wydrukować, ale drukowała na niej dodatkową białą pustą stronę. Używam motywu AdminLTE bootstrap 3 do wydrukowania strony raportu i znacznika stopki chciałem umieścić ten tekst w prawym dolnym rogu strony:

Wydrukowane przez Mr. Someone

Użyłem jquery do umieszczenia tego tekstu zamiast poprzedniej stopki „Prawa autorskie” z

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

i domyślnie w motywie stopka znacznika używa klasy .main-footer, która ma atrybuty

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

spowodowało to dodatkowe białe miejsce, więc po zapoznaniu się z problemem miałem różne opcje, a najlepszą opcją było użycie

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

Tylko na tej konkretnej stronie

— Yousef Al-Hadhrami
źródło

0

Umieść potrzebne rzeczy na stronie w div i użyj podziału strony wewnątrz: unikaj tego div. Twój div pozostanie na jednej stronie i w razie potrzeby przejdzie na drugą lub trzecią stronę, ale następny div, jeśli będzie musiał zrobić podział strony, powinien zaczynać się na następnej stronie.

— Rick Turner
źródło

0

Sprawdź, czy po tagu html na dole jest spacja. Pomogło mi usunąć wszystkie białe spacje poniżej

— Wahsei
źródło