时间戳

首页 > 解决方案 > 在 Node/Puppeteer/Handlebars 中为 HTML/PDF 生成添加页面边框

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

问题描述

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

标签： cssnode.jspdfhandlebars.jspuppeteer

解决方案

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

@page {
  margin: 10px 0; 
}

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

推荐阅读