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

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

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 ]

2 голосов
/ 10 февраля 2015

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

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

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

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

2 голосов
/ 01 сентября 2016

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

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

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

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

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

1 голос
/ 29 октября 2018 
.print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

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

1 голос
/ 23 ноября 2017

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

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

до 

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

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

1 голос
/ 19 июля 2017

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

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

body.printing {
    display: block;
}

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

1 голос
/ 09 мая 2017

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

<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>
1 голос
/ 18 февраля 2017

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

<style type="text/css">
   <!--
   html, body {
    height: 95%; 
    margin: 0 0 0 0;
     }
   -->
</style>
0 голосов
/ 08 марта 2019

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

0 голосов
/ 04 февраля 2019

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

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

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

0 голосов
/ 02 сентября 2018

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

Отпечатано Mr. Someone

Я использовал jquery, чтобы поместить этот текст вместо предыдущего нижнего колонтитула «Права копирования» с 

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

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

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

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

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

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...