как избежать лишних пустых страниц в конце при печати? - PullRequest
Новая
       4

как избежать лишних пустых страниц в конце при печати?

67 голосов
/ 21 октября 2011

Я использую свойство CSS,

Если я использую page-break-after: always; => Она печатает лишнюю пустую страницу раньше

Если я использую page-break-before: always; => Она печатает дополнительнуюпустая страница после. Как этого избежать? 

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

Ответы [ 20 ]

90 голосов
/ 23 октября 2013

Вы пробовали это? 

@media print {
    html, body {
        height: 99%;    
    }
}
58 голосов
/ 21 октября 2011

Вы можете добавить 

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

, чтобы последний элемент print не получал лишнего разрыва страницы.

Обратите внимание, что селектор: last-child не поддерживается вIE8, если вы нацелены на этого негодяя браузера.

37 голосов
/ 19 июня 2014

Решение, описанное здесь помогло мне ( ссылка на веб-архив ).

Прежде всего, вы можете добавить рамку ко всем элементам, чтобы увидеть, что вызывает добавление новой страницы (возможно, некоторые поля, отступы и т. Д.). 

div { border: 1px solid black;}

И само решение заключалось в добавлении следующих стилей: 

html, body { height: auto; }
18 голосов
/ 05 января 2018

, если ничего из этого не работает, попробуйте это 

@media print {

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

}

убедитесь, что это 100vh

8 голосов
/ 14 апреля 2014

Это работает для меня 

.print+.print {
    page-break-before: always;
}
4 голосов
/ 12 августа 2016

Не знаю (на данный момент) почему, но этот помог: 

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

Надеюсь, кто-то спасет его волосы, борясь с проблемой ...;)

3 голосов
/ 13 мая 2014

установить display:none для всех других элементов, которые не предназначены для печати.установка visibility:hidden будет держать их скрытыми, но они все еще там и заняли место для них.пустая страница предназначена для этих скрытых элементов.

3 голосов
/ 05 апреля 2017

В моем случае помогла установка ширины для всех дивов: 

.page-content div {
    width: auto !important;
    max-width: 99%;
}
3 голосов
/ 21 октября 2011

Если вы просто хотите использовать CSS и хотите избежать разрыва страницы, используйте 

.print{
    page-break-after: avoid;

}

Взгляните на постраничный носитель

Вы можете использовать эквиваленты сценариев для pageBreakBeforeи pageBreakAfter, динамически назначать их значения.Например, вместо создания пользовательских разрывов страниц для ваших посетителей, вы можете создать сценарий, чтобы сделать это необязательным.Здесь я создам флажок, который переключается между нарезкой страницы в заголовках (h2) и на собственное усмотрение принтера (по умолчанию): 

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

Нажмите здесь для примера, который использует это.Вы можете заменить H2 внутри скрипта другим тегом, таким как P или DIV.

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

3 голосов
/ 17 декабря 2017

Я изменил css display и свойство width области печати 

#printArea{
    display:table;
    width:100%;
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...