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

HTML

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

Above is the code to add the page Breaker, however it does not seem to work, everything gets printed on one page .I have tried using break-after , break-inside as well, not working Please suggest.

CodePudding user response：

Looking at your code, there're some cases where page break won't work if the tag or the parent tag has a certain properties.

1. using page-break inside tables
2. floating elements
3. inline-block elements
4. block elements with borders.

CodePudding user response：

The page-break-after and page-break-inside CSS properties can be used to specify how page breaks should be inserted in an HTML document when printing. However, the page-break-after property only works when applied to block-level elements, such as div elements, and will not work when applied to inline elements such as text.

To fix the issue, you can try applying the page-break-after property to a block-level element that is a parent of the div element with the pagebreak class.

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

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

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