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

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

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

решение, описанное здесь помог мне (webarchive link).

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

div { border: 1px solid black;}

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

html, body { height: auto; }

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

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

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

@media print {

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

}

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

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

.print{
    page-break-after: avoid;

}

посмотри paged media

вы можете использовать эквиваленты сценариев для 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

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

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

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

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

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

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

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

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

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

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

мое решение: min-height: auto на

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

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

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

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

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

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

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

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

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

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

body.printing {
    display: block;
}

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

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

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

до

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

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

попробуй:

@media print {
   page-break-after : auto;
}

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

напечатано Мистером кем-то

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

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

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

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

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

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

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