'Is there any way to get the height of a single page if you would print the page as a pdf?

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

javascripthtmlreactjspdfmaterial-ui


Solution 1:[1]

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

Solution 2:[2]

Use these: `- document.height()

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vinit Kasture
Solution 2 Farrukh Ali

Related Questions