我正在使用 Node 和 Puppeteer 生成一个使用 Handlebars 模板的 PDF。一切都按预期工作。
我唯一的问题是:如何向文档添加边框填充，这样，如果文档跨多个页面，内容不会一直到页面的最边缘？有我可以使用的样式元素吗？
请参阅下面我的 Handlebars 模板:
<!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>最佳答案
您可以像这样访问页面的样式:
@page {
margin: 10px 0;
}
因此，通过将以上内容添加到 handlebars 模板，您可以将所需的 10px 边距添加到文档的顶部和底部。
关于css - 在 Node/Puppeteer/Handlebars 中为 HTML/PDF 生成添加页面边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67706849/