[英]css pdf page - header overlapping with content
正如我们从图像中看到的,我的内容与标题图像重叠,这是我的代码:
<style type="text/css" media="print">
@page {
/*size:landscape;*/
@top-center {
content: element(header);
}
@bottom-left {
content: element(footer);
}
}
div.header {
padding: 10px;
position: running(header);
}
div.footer {
display: block;
padding: 5px;
position: running(footer);
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
</style>
</head>
<div class="header">
<img src="logo.png" title="logo" width="200px"/>
</div>
<div class="content">
</div>
PS:请不要关闭这个重复的问题,因为我已经搜索了所有与此相关的问题,但我的看起来不同,因为涉及 PDF。
页眉和页脚建立在页边距内。
所以解决办法是增加页面上边距,例如:
@page {
margin-top: 50mm;
}
在PDF中正确实现页眉页脚的方法
在互联网上找到了很多不同的解决方案和解决方法之后,我终于分享了一种对我有用的方法。
请将这些样式添加到报表容器(呈现报表的 div)。
<div #scrollingContainer class="col-xxs-9 content-container" style="overflow-x: hidden;width:100%;">
</div>
// Div 属性可能不同
根据页眉和页脚的大小(表格包裹在 div 中),使用 thead 和 tfoot 将 Doc 组件包裹到表格结构中。
<div style="width: 100%;">
<table style="table-layout: fixed; width: 100%;"> // Add this css to make main table fixed, child tables will still scroll
<thead class="page-break-before">
<tr>
<td>
<div style="height: 80px;"></div> // space for the respective header
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div> Your Data Goes Here........</div>
</td>
</tr>
</tbody>
<tfoot class="show-in-print page-break-after">
<tr>
<td>
<div style="height: 130px;"></div> // space for the respective footer
</td>
</tr>
</tfoot>
</table>
</div>
示例页眉和页脚
<div class="page-break-before">
<div>A long header content...</div>
</div>
<div class=" page-break-after">
<p> A long footer content...</p>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.