在 Node/Puppeteer/Handlebars 中为 HTML/PDF 代添加页面边框

Question

我正在使用 Node 和 Puppeteer 生成一个使用车把模板的 PDF。一切都按预期工作。

我唯一的问题是：如何向文档添加边框填充，以便在文档跨多个页面时，内容不会一直到页面的最边缘？有我可以使用的样式元素吗？

查看下面我的车把模板：

<!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>

Answer 1

您可以像这样访问页面的样式：

@page {
  margin: 10px 0; 
}

因此，通过将以上内容添加到车把模板中，您可以将所需的 10px 边距添加到文档的顶部和底部。

在 Node/Puppeteer/Handlebars 中为 HTML/PDF 代添加页面边框

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

css

pdf

node.js

handlebars.js

puppeteer