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

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>

上面是添加分页符的代码，但是它似乎不起作用，所有内容都打印在一页上。我尝试过使用 中断后，内部也中断，不起作用 请推荐。

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>

Answer 3

在这种情况下，我使用 page-break-before:always; 内部分页：避免；但这现在有效吗？怎么解决这个问题