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

Question 1

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

Question 2

Вы могли бы добавить

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

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

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

Question 3

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

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

Question 4

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

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

div { border: 1px solid black;}

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

html, body { height: auto; }

Question 5

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

@media print {

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

}

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

Question 6

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

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

Question 7

Если вы просто хотите использовать 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

Question 8

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

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

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

Question 9

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

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

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

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

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

Question 10

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

Question 11

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

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

Question 12

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

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

Развернуть фрагмент

Question 13

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

Question 14

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

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

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

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

Question 15

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

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

body.printing {
    display: block;
}

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

Question 16

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

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

Question 17

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

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

Question 18

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

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

к

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

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

Question 19

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

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

Question 20

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

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

Возможно, будет достаточно установить границу на элементе контейнера. <- Untestet.

Question 21

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

Напечатано мистером Кто-то

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

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

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

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

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

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

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

Question 22

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

Question 23

Проверьте, есть ли внизу после тега html пробел. Удаление любых пробелов ниже помогло мне

Answer 1

88

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

css printing Ангелин Надар
источник

какова высота класса печати?

juankysmith

1

Поскольку это для счетов-фактур, высота будет динамической в соответствии с количеством элементов.

Angelin Nadar

4

Вот как мы это делали во времена холодной войны:<div>This page intentionally left blank.</div>

Боб Штайн

Answer 2

какова высота класса печати?

juankysmith

Answer 3

1

Поскольку это для счетов-фактур, высота будет динамической в соответствии с количеством элементов.

Angelin Nadar

Answer 4

4

Вот как мы это делали во времена холодной войны:<div>This page intentionally left blank.</div>

Боб Штайн

Answer 5

72

Вы могли бы добавить

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

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

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

AKX
источник

88

Это нормально, поскольку «Не поддерживается в IE» - это стандартная функция IE,

Анджелин Надар

Для других читателей это не сработало для меня, но приведенный ниже ответ о настройке автоматической высоты для элементов HTML и body работал как шарм.

Cody

Answer 6

88

Это нормально, поскольку «Не поддерживается в IE» - это стандартная функция IE,

Анджелин Надар

Answer 7

Для других читателей это не сработало для меня, но приведенный ниже ответ о настройке автоматической высоты для элементов HTML и body работал как шарм.

Cody

Answer 8

101

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

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

giannis.epp
источник

2

У меня сработало: @media print {html {height: 99%; }}, созданный документ был больше по размеру

Густаво

10

В моем случае Zurb Foundation устанавливал для html и body значение height: 100%. Я смог отменить это с помощьюheight: auto

zacharydl

4

Подтверждаю, что комментарий @zacharydl работает для меня, и height: auto;это более элегантно, чемheight: 99%;

jontsai 06

У меня была эта проблема, потому что я устанавливал высоту html на 101%, чтобы полоса прокрутки всегда отображалась. (Устраняет переход между страницами) - так что да, 100% высота в стиле печати - вкусное исправление! - ура.

rob_james

@rob_james, чтобы избежать использования 101%, вы можете установить overflow-y: scroll; чтобы полоса прокрутки всегда была видна

user161592

Answer 9

2

У меня сработало: @media print {html {height: 99%; }}, созданный документ был больше по размеру

Густаво

Answer 10

10

В моем случае Zurb Foundation устанавливал для html и body значение height: 100%. Я смог отменить это с помощьюheight: auto

zacharydl

Answer 11

4

Подтверждаю, что комментарий @zacharydl работает для меня, и height: auto;это более элегантно, чемheight: 99%;

jontsai 06

Answer 12

У меня была эта проблема, потому что я устанавливал высоту html на 101%, чтобы полоса прокрутки всегда отображалась. (Устраняет переход между страницами) - так что да, 100% высота в стиле печати - вкусное исправление! - ура.

rob_james

Answer 13

@rob_james, чтобы избежать использования 101%, вы можете установить overflow-y: scroll; чтобы полоса прокрутки всегда была видна

user161592

Answer 14

46

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

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

div { border: 1px solid black;}

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

html, body { height: auto; }

Михаил Радионов
источник

9

Вау, это был мой старый блог! У меня была такая же проблема, и я думал, что уже исправил этот когда-то ^^ маленький мир

Мигель Стивенс

3

плюс 1 для добавления границы div.

Ифтихар Али Ансари

Добавление границы было отличной идеей !! Это помогло мне понять, что на моей обертке страницы была установлена минимальная высота, из-за которой появлялась дополнительная страница. Некоторое время я бился об это головой. Спасибо огромное!

erichunt

Answer 15

9

Вау, это был мой старый блог! У меня была такая же проблема, и я думал, что уже исправил этот когда-то ^^ маленький мир

Мигель Стивенс

Answer 16

3

плюс 1 для добавления границы div.

Ифтихар Али Ансари

Answer 17

Добавление границы было отличной идеей !! Это помогло мне понять, что на моей обертке страницы была установлена минимальная высота, из-за которой появлялась дополнительная страница. Некоторое время я бился об это головой. Спасибо огромное!

erichunt

Answer 18

33

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

@media print {

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

}

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

Брайан Чан
источник

4

установка высоты на 100vh решила мою проблему. Спасибо

user2398069

1

"@media print {* {overflow: hidden! important;}}" очень важен для меня.

shinriyo

1

Наконец-то ответ на непонятную проблему! Safari на OSX показывал полностью пустую страницу, в то время как Chrome, FF и Edge были хороши с предварительным просмотром. Большое спасибо!

поп,

Установка высоты на 100vh, похоже, препятствует загрузке более одной страницы, так что, если в документе более одной страницы, при предварительном просмотре загружается только первая страница

Филипе

Answer 19

4

установка высоты на 100vh решила мою проблему. Спасибо

user2398069

Answer 20

1

"@media print {* {overflow: hidden! important;}}" очень важен для меня.

shinriyo

Answer 21

1

Наконец-то ответ на непонятную проблему! Safari на OSX показывал полностью пустую страницу, в то время как Chrome, FF и Edge были хороши с предварительным просмотром. Большое спасибо!

поп,

Answer 22

Установка высоты на 100vh, похоже, препятствует загрузке более одной страницы, так что, если в документе более одной страницы, при предварительном просмотре загружается только первая страница

Филипе

Answer 23

8

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

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

Лам
источник

Это сработало у меня лучше, чем у остальных! Дополнительная информация здесь: blog.jonesed.net/2012/10/…

RemarkLima

Answer 24

Это сработало у меня лучше, чем у остальных! Дополнительная информация здесь: blog.jonesed.net/2012/10/…

RemarkLima

Answer 25

Если вы просто хотите использовать 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

Answer 26

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

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

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

Answer 27

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

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

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

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

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

Answer 28

Я просто поставил min-height: initial! Important; и это сработало для меня.

Сиби Томас 07

Answer 29

@SibyThomas Я избегаю объявления! Important, если это вообще возможно. Это затрудняет переопределение свойств. Я даже не initialподумал, так как предполагал, что это будет проблематично для элементов с динамическим размером. Обратите внимание, что начальное значение равно 0, поэтому я все еще предполагаю, что autoэто обычно более полезно.

Джордж Мариан,

Answer 30

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

Answer 31

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

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

Answer 32

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

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

Развернуть фрагмент

Answer 33

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

Answer 34

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

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

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

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

Answer 35

Да, если вы используете, visibility: hidden;он все равно будет занимать место. При использовании display: none;пространство будет удалено. В этот момент вам не нужно будет специально устанавливать высоту, просто к вашему сведению.

chapeljuice

Answer 36

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

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

body.printing {
    display: block;
}

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

Answer 37

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

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

Answer 38

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

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

Answer 39

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

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

к

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

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

Answer 40

1

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

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

гость
источник

Answer 41

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

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

Возможно, будет достаточно установить границу на элементе контейнера. <- Untestet.

Answer 42

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

Напечатано мистером Кто-то

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

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

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

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

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

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

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

Answer 43

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

Answer 44

0

Проверьте, есть ли внизу после тега html пробел. Удаление любых пробелов ниже помогло мне

Wahsei
источник

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

Ответы: