0
278
ViewsHTML to pdf: jump to new page when container content overflows
I am using handlebar to generate an HTML file, and then use puppeteer to change it to pdf. Right now I have a handlebars template of structure like this
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto"
/>
<style>
...
.body_container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
max-height: 19.334cm;
border: 0.25px solid;
border-color: #b8b8b8;
font-size: 14px;
}
</style>
</head>
<body>
<div class="body_container">
...
</div>
<div style="page-break-before: always"></div>
...
</body>
</html>
The page should look like this
There're some divs(pink) inside this body container(in black). The amount of content in each div is dynamic, so there is a possibility that it could overflow.
What I hope to do is whenever the body divs have a height exceeding the max height of the body container, it should jump to a new page and make another body container, then write in there.
Is it possible to do so? Any help/hints would be appreciated!
·
Juan Pablo Isaza
Answer question