CODEWITHSUNDEEP
cssnode.jspdfhandlebars.jspuppeteer
Muirik
Muirik

Reputation: 6289

Adding page border to HTML/PDF generation in Node/Puppeteer/Handlebars

I am using Node and Puppeteer to generate a PDF that uses a handlebars template. All is working as expected.

My only question is: how does one add border padding to the document, so that, if the document runs over multiple pages, the content doesn't go right up to the very edge of the page? Is there a style element I can use?

See my handlebars template below:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>PDF Result Template</title>
  <style>
    .container {
      margin: auto;
      padding: 30px;
      font-size: 13px;
      line-height: 13px;
      font-family: 'Helvetica Neue', 'Helvetica';
      color: #555;
    }

    .top-heading {
      margin-bottom: -20px;
      color: red;
    }

    .box {
      width: 100%;
    }

    .table-box {
      width: 100%;
      table-layout: fixed;
    }

    .left-box {
      float: left;
      min-width: 25%;
      max-width: 25%;
      margin-top: -20px;
    }

    .right-box {
      float: right;
      min-width: 75%;
      max-width: 75%;
    }

    .one-quarter {
      border: #ccc thin solid;
      max-width: 25%;
    }

    .half {
      border: #ccc thin solid;
      max-width: 50%;
    }

    .three-quarter {
      border: #ccc thin solid;
      min-width: 75%;
      max-width: 75%;
    }

    .full {
      border: #ccc thin solid;
      max-width: 100%;
    }

    .highlighted {
      font-weight: bold;
    }

    .flat-line {
      border: none;
      height: 1px;
      background-color: #ccc;
    }

    .header {
      clear: both;
      margin-top: 120px;
      text-align: center;
    }

    .centered {
      text-align: center;
    }

    .details-cell {
      padding: 0 8px;
    }

    .notes-table {
      margin-top: 20px;
      min-width: 100%;
    }

    .goal-heading {
      font-weight: bold;
      text-align: center;
    }

    .signature {
      margin-top: 10px;
      min-width: 100px;
      max-width: 100px;
      height: auto;
      position: relative;
      float: right;
    }
  </style>
</head>

<body>
  <div class="container">
    <table>
      // Other code
    </table>
  </div>
</body>
</html>

Upvotes: 3

Views: 3171

Answers (1)

Muirik
Muirik

Reputation: 6289

You can access styling for the page like so:

@page {
  margin: 10px 0; 
}

So by adding the above to the handlebars template you're able to add the desired 10px of margin to the top and bottom of the document.

Upvotes: 2

Related Questions