Puppeteer：如何在 header/footer 中添加一条水平线？

Question

我正在尝试在页眉之后和页脚之前添加 <hr> 行。

例如，在页脚中，我执行了以下操作（使用 puppeteer-sharp）：

var footerTemplate =
    "<hr style=style='border-bottom: 2px solid #8c8b8b;' />" +
    "<div style=\"text-align: right;width: 297mm;font-size: 8px;\">" +
    "   <span style=\"margin-right: 1cm; color:rgb(89, 89, 91);\">" +
    "      Page <span class=\"pageNumber\"></span>" + 
    "   </span>" +
    "</div>";

pdfOptions.FooterTemplate  = footerTemplate;

但是，我看不到这条线。我发现 here a similar case and it is suggested to add the lines in the document instead because as it is mentioned in the following source:

The content of the header and footer is specified with the 'content' property. The content is always rendered as a single line.

然后：有没有一种方法可以使用 puppeteer 在“文档本身”中添加这些多行？或者更好：有没有办法在页脚和页眉中添加一行？

Answer 1

考虑完全避免 <hr /> 并使用 CSS:

样式

header, footer { background: #eee; }
header {
  padding-bottom: 1em;
  margin-bottom: 1em;
  border-bottom: 1px solid #000;
}
footer {
  padding-top: 1em;
  margin-top: 1em;
  border-top: 1px solid #000;
}

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

Puppeteer：如何在 header/footer 中添加一条水平线？

Puppeteer: how can I add a horizontal line in the header/footer?

puppeteer

puppeteer-sharp