Print and page break

1/28/2023 • about 1 min read

An issue I thought was because of page-break-* CSS property, but not.

When a sample webpage being saved to PDF in the broswer using window.print(), it was expected to be a multi-page PDF, but the PDF only showed some content on the first page and left other pages blank. The content looked being cut and hidden outside the first page.

First attempt was failed trying to put some break-before CSS property somewhere in the layout that would add a page break before a desired element.

But thanks to this react-to-print, I figured out the issue was still related to CSS styles.

@media print {
  html,
  body {
    height: initial !important;
    overflow: initial !important;
  }
}

@page {
  size: auto;
  margin: 20mm;
}

Make sure html and body elements have got height and overflow to the initial value.

The library looks interesting though, if the projects require a related feature that this library would fit in.