So basically I want to print out a page as a pdf from a react app, that include multiple components. number of components change from 4 up to 12 and the height of the components also change based on content from the store.
I need every 900px(size of my a4 page) to add a space so that none of the components get split between pages. or to split the hole page in to even 900px parts based on how many components are rendered.
This is not a question can be answered with code snippet. I will explain how i would tackle with this problem.
Steps right after the the print event (on button click or automated...)
const element = document.getElementById('element');
element.offsetHeight // height
const Placeholder = ({height}) => (
<div style={{height: `${height}px` }}> </div>
)
Component 1 is 300px
Component 2 is 300px
Component 3 is 700px
Component 4 is 300px
loop {
// first page
<Component1 />
<Component2 />
<Placeholder height={300} />
// second page
<Component3 />
<Placeholder height={200} />
<Component4 />
<Placeholder height={600} />
}