Unbreakable block in report generated by @journeyapps/pdf-reports

General Q&A
1

I’m creating a pdf report using the library @journeyapps/pdf-reports.
Can I somehow designate the block so it will not break into parts, but will be showed fully? (So, if the block does not fit fully into the page, then it will start from a new page)

1 Like
2

You can create a few CSS classes or add inline style attributes that force HTML elements onto a new page or avoid splitting elements across pages. Here is an example:

CSS Examples:

/* avoid splitting element across pages */
.no-break {
  page-break-inside: avoid;
}

/* force elements to display on new page */
.force-break {
  page-break-before: always;
}

HTML Example:

<div class=”no-break”>
  ... all content and other elements inside this element will not break from one page to another ...
</div>

<div class=”force-break”>
  ... all content and other elements inside this element be displayed on a new page ...
</div>
2 Likes