在 Node/Puppeteer/Handlebars 中为 HTML/PDF 生成添加页面边框答案

【问题标题】：Adding page border to HTML/PDF generation in Node/Puppeteer/Handlebars在 Node/Puppeteer/Handlebars 中为 HTML/PDF 生成添加页面边框
【发布时间】：2021-05-27 03:42:15
【问题描述】：

我正在使用 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>

【问题讨论】：

我不这么认为，不——因为分页本身不是 CSS 问题。我不知道在这种情况下我可以用来应用 CSS 的 HTML 属性，以处理在最终生成的每个页面的边缘添加边框填充。

标签： css node.js pdf handlebars.js puppeteer

【解决方案1】：

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

@page {
  margin: 10px 0; 
}

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

【讨论】：