як уникнути зайвої порожньої сторінки в кінці під час друку?

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

}

переконайтеся, що він становить 100 в год

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

Здається, існує багато можливих причин, імовірно, тема полягає в тому, що тег тіла закінчується висотою, яка вважається занадто великою з причини.

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

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

Зверніть увагу, на autoдумку PhpStorm, здавалося , це не правильне значення. Однак це правильно згідно з документацією Mozilla щодо мінімальної висоти :

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

Question 10

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

Question 11

У моєму випадку допомогло встановлення ширини для всіх div:

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

Question 12

Я змінив властивість css display та width для області друку

#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 є помилка, коли в певних ситуаціях приховування елементів після завантаження з дисплеєм: жоден не залишає позаду багато зайвого місця. Я гадаю, вони обчислюють висоту документа ще до того, як документ буде зроблений. Chrome також запускає 2 події зміни засобів масової інформації та не підтримує попередній друк тощо. Вони в основному є елементом друку. Ось моє рішення:

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

Можливо, буде достатньо встановити межу для елемента контейнера. <- Нетестет.

Question 21

Жодна з відповідей не працювала зі мною, але, прочитавши всі, я зрозумів, у чому проблема в моєму випадку. У мене є сторінка розміром 1 HTML, яку я хочу надрукувати, але вона друкувала разом із нею додаткову білу порожню сторінку. Я використовую AdminLTE тему bootstrap 3 для друку сторінки звіту, і в ньому тег нижнього колонтитула я хотів розмістити цей текст у нижньому правому куті сторінки:

Надруковано паном Хтось

Я використав jquery, щоб розмістити цей текст замість попереднього колонтитула "Копіювати права" за допомогою

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

і за замовчуванням у темі нижній колонтитул тегу використовує клас .main-footer, який має атрибути

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

це спричинило додатковий пробіл, тому, дізнавшись про проблему, у мене були різні варіанти, і найкращим варіантом було використовувати

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

Просто на цій конкретній сторінці

Question 22

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

Question 23

Перевірте, чи немає пробілу після тегу html внизу. Видалити пробіли нижче допомогло мені