разрыв страницы после не разрывает страницу при печати - PullRequest
Новая
       1

разрыв страницы после не разрывает страницу при печати

0 голосов
/ 06 ноября 2018

На самом деле, какое условие нужно или когда page-break-after: always или before работает? Я попытался создать другой div для page-break, даже он не работает при изменении числа с плавающей запятой, clear:both, но не работает.

Здесь четыре sections находятся на одной странице. Теперь я хочу разбить страницу после двух разделов в print, но не ломается, все еще все остальное. Хотя margin-bottom может быть заменой, но было бы лучше, если бы разрыв страницы работал 

$(document).on('click','#ptn',function(){
  window.print();
})
@media print {
  body *{
    visibility: hidden;
  }
  #pay_btn{
    display: none;
  }
  #printDiv, #printDiv * {
      visibility: visible;
   }
   #printDiv {
      width: 297mm;
      height: 210mm;
      position: absolute;
      left:0;
      bottom:0;
      top:0;
      right:0;
   }
   section:nth-child(even) {
    page-break-after: always;
    background:black;
  }
}
#printDiv section{
  width:22%;
  margin-right:5px;
  height:70mm;
  float:left;
  border:2px solid red;
  margin-bottom:20px;
}
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
  <div class='col100 txtright'><button id='ptn'>Print</button></div>
  <div id='printDiv'>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
   </div>
  </body>
</html>

1 Ответ

0 голосов
/ 07 ноября 2018

Это то, что я сегодня использую на производстве:

В моем LESS файле 

@media print {
  .page-break {
    display: block;
    page-break-before: always;
  }

  .no-print {
    display: none;
  }
}

И тогда у меня есть эти div в моем коде <div class="page-break"></div>

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

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

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

...