Подтвердить что ты не робот

Как избежать дополнительной пустой страницы в конце во время печати?

Я использую свойство 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>
4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

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

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

Ответ 3

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

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

div { border: 1px solid black;}

И самим решением было добавить следующие стили:

html, body { height: auto; }

Ответ 4

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

@media print {

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

}

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

Ответ 5

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

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

Ответ 6

Не знаю (как сейчас) почему, но это помогло:

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

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

Ответ 7

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

.print{
    page-break-after: avoid;

}

Посмотрите постраничные материалы

Вы можете использовать эквиваленты сценариев для pageBreakBefore и pageBreakAfter, динамически назначать их значения. Например, вместо форсирования пользовательских разрывов страниц для ваших посетителей вы можете создать script, чтобы сделать это необязательным. Здесь я создам флажок, который переключает между нарезкой страницы в заголовках (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 внутри script на другой тег, такой как P или DIV.

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

Я изменил свойство отображения и ширины CSS в области печати

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

Ответ 11

После борьбы с различными настройками и высотами разрыва страницы и миллионами различных правил CSS на теге тела я, наконец, решил его через год.

У меня есть div, который должен быть единственным на странице, который печатает, но после этого я получал несколько пустых страниц. Мой тег body установлен в visibility:hidden;, но этого было недостаточно. Вертикально высокие элементы страницы по-прежнему занимают "пространство". Поэтому я добавил это в мои правила CSS для печати:

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

для таргетинга определенных divs их идентификаторами, которые содержат высокие элементы макета страницы. Я уменьшил высоту, а затем удалил их из макета. Больше нет пустых страниц. Спустя годы я рад сообщить своему клиенту, что я его взломал. Надеюсь, это поможет кому-то.

Ответ 12

Кажется, существует множество возможных причин, причем вероятной темой является то, что тег body заканчивается высотой, которая считается слишком большой для причины w/e.

Моя причина: min-height: 100% в базовой таблице стилей.

Мое решение: min-height: auto в директиве @media print.

Примечание. auto, похоже, не является правильным значением, согласно PhpStorm. Однако это верно в соответствии с документацией Mozilla на минимальной высоте:

авто
Минимальный размер по умолчанию для гибких элементов, обеспечивающий более разумное значение по умолчанию, чем 0 для других макетов.

Ответ 13

Добавьте этот css на ту же страницу, чтобы расширить файл css.

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

Ответ 14

Я пробовал все решения, это работает для меня:

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

Ответ 15

У Chrome, похоже, есть ошибка, когда в определенных ситуациях скрытие элементов после загрузки с отображением: none, оставляет много лишнего места. Я бы предположил, что они вычисляют высоту документа до того, как документ будет выполнен. Chrome также запускает 2 события изменения медиа и не поддерживает onbeforeprint и т.д. Они в основном являются печатающими. Вот мой способ:

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

body.printing {
    display: block;
}

Вы даете телу class= "печать" на готовом документе, и это позволяет использовать стили печати. Эта система позволяет выполнять модуляцию стилей печати и предварительный просмотр в браузере.

Ответ 16

Я только что столкнулся с ситуацией, когда изменение с

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

к

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

исправлена ​​эта проблема.

Ответ 17

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

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

Ответ 18

У меня была похожая проблема, но причина была в том, что у меня было 40px поля в нижней части страницы, поэтому последняя строка всегда переносилась, даже если на последней странице было место для нее. Не из-за какой-либо команды page-break-* css. Я исправил, удалив поле на печать, и он работал нормально. Просто хотел добавить свое решение на случай, если у кого-то есть что-то похожее!

Ответ 19

Ни один из ответов не работал со мной, но после прочтения всех них, я выяснил, в чем проблема в моем случае, у меня есть 1 HTML-страница, которую я хочу напечатать, но она печатала с ней дополнительную белую пустую страницу. Я использую AdminLTE тему начальной загрузки 3 для печати страницы отчета и в ней тег нижнего колонтитула, который я хотел разместить в правом нижнем углу страницы:

Отпечатано г-н Кто-то

Я использовал jquery, чтобы поместить этот текст вместо предыдущего нижнего колонтитула "Copy Rights" с

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

и по умолчанию в теме тег нижнего колонтитула использует класс .main-footer, который имеет атрибуты

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

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

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

Просто на этой конкретной странице

Ответ 20

Странная установка прозрачной границы решила это для меня:

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

Может быть, этого будет достаточно, чтобы установить границу для элемента контейнера. & lt; - Untestet.

Ответ 21

Поместите материал, который вам нужен, на страницу в div и используйте разрыв страницы: избегайте этого div. Ваш div останется на одной странице и перейдет на вторую или третью страницу, если это необходимо, но следующий div, если он должен сделать разрыв страницы, должен начаться на следующей странице.