我有一个动态生成的HTML页面，必须保存为PDF格式。页面的边框必须出现在页面的边缘，因此在@media print中，我将@page的大小设置为A4，边距设置为0。问题是内容将在页面边框上被覆盖。
当我将填充设置为边框时，第一页的顶部会正确打印，但底部和其余页面的边框上的内容会被覆盖。
这可以清楚地看到，如下面的图像所示。
因为我给了顶部边框填充，所以第一页的顶部可以，但底部不行。
在第二页中，整个内容都在页边距内。
下面是同一个文档的HTML。
body {
margin: 0px;
padding: 0px;
}
#pageborder {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 10px solid #F5821F;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
margin: 0px;
padding: 0px;
}
#pageborder2 {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 10px solid #F5821F;
margin: 0px;
padding: 0px;
}
#pageborder3 {
position: fixed;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
border: 3px solid #F5821F;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
padding-top: 90px;
padding-bottom: 90px;
}
#innerContent {
margin: 50px;
}
@media print {
@page{
margin: 0;
}
#pageborder3 {
padding-top: 90px;
padding-bottom: 90px;
}
}<body>
<div id="pageborder">
</div>
<div id="pageborder2">
</div>
<div id="pageborder3">
</div>
<div id='innerContent'>
<h1>Test</h1>
<p>Lorem Ipsum</p>
</div>
</body>
2条答案
按热度按时间bksxznpy1#
page-break-inside: avoid和段落上的padding/margin之间的组合就可以做到这一点。如果分页符周围有很大的段落，这看起来会很奇怪，因为这会在页面底部形成一个很大的间隙，所以你应该把文本分成较小的段落。
olmpazwi2#
在你的CSS中添加这些代码行，它会工作：）