0

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 enter image description here

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!

user9882001
  • 47
  • 6
  • Similar question: https://stackoverflow.com/questions/1664049/can-i-force-a-page-break-in-html-printing – Raptor Oct 20 '21 at 06:10
  • Dear @Raptor: thank you for your prompt reply. Unlike the link you posted, I know how to force a page break, but the problem is with the dynamic content inside the container, I will not know exactly where to put in a page-break. – user9882001 Oct 20 '21 at 07:02
  • You can use JavaScript to measure the DIV height, something like: https://stackoverflow.com/questions/15615552/get-div-height-with-plain-javascript – Raptor Oct 20 '21 at 09:37

1 Answers1

0

Is there any reason why you can't use page-break-inside: avoid? Then the div will try to avoid breaking if it starts further down the page, by putting it on a new page. It will still break if the div is longer than 1 page, however.

Andross
  • 105
  • 1
  • 8