分页符在打印预览中不起作用

Question

div.pagebreak {
 page-break-after: always;
 page-break-inside: avoid; 
}

HTML

 <!-- Page separator -->
  <div class="pagebreak" style="float: none;"><hr class="hidden-print" /></div>
  <app-mud-check-header [report] ="mudCheckWorksheet"></app-mud-check-header>

上面是添加分页符的代码，但是它似乎不起作用，所有内容都打印在一页上。我也尝试过使用 break-after，break-inside，但不起作用 请建议。

Answer 1

查看您的代码，在某些情况下，如果标签或父标签具有某些属性，则分页符将不起作用。

1. 在表格内使用分页符
2. 浮动元素
3. 行内块元素
4. 带边框的块元素。

Answer 2

page-break-after 和 page-break-inside CSS 属性可用于指定打印时如何在 HTML 文档中插入分页符。 但是，page-break-after 属性仅在应用于块级元素（如 div 元素）时有效，而在应用于内联元素（如文本）时不起作用。

要解决此问题，您可以尝试将 page-break-after 属性应用于块级元素，该元素是具有 pagebreak 类的 div 元素的父元素。

div.pagebreak {
  page-break-after: always;
  page-break-inside: avoid; 
}

.parent {
  page-break-after: always;
}

<div class="parent">
  <div class="pagebreak">
    <app-mud-check-header [report] ="mudCheckWorksheet"></app-mud-check-header>
  </div>
</div>