I'm trying to render a pdf from dynamic content with puppeteer and react. The layouting is done in material ui for react, so page-break-before:always is not an option because i need the grid layout which is flex and wont work with page-break-before. I need to get the height of one page, so the header of the next page doesn't overflow. If i calculate where the header should be with pagewidth * Math.sqrt(2), it gives me the position value of where it actually is. But unfortunally when i go to print it it's overflowing by a few pixels and the error is getting bigger with each page. I have wondered how to fix this problem for the last 2 days. I've even tried resetting the position with a margin.

Here are some code snippets from my program which might maybe help.

let width = 800//document.documentElement.getBoundingClientRect().width
for (let pagewidth = width; pagewidth * Math.sqrt(2) < document.documentElement.getBoundingClientRect().height; pagewidth  = width) {
  let pageBreakXPosition = Math.ceil(Math.sqrt(2) * pagewidth)
  header.style.marginTop = pageBreakXPosition - header.getBoundingClientRect().top   "px"
}

this is just the "important" part of the code because all of the other code targets the elements' width or some other styles. My problem would really be fixed if i just knew the exact point where the page would break, but appareantly my calculation for pageBreakXPosition is wrong in some way.

attached is a picture of the overflow(if you look carefully you can see that the error is getting bigger):

Page 2

Page 4

CodePudding user response：

I think you can set the height as per your requirement and that should work

CodePudding user response：

Use these: `- document.height()

• document.body.scrollheight
• screen.height
• $(document).height()`