我必须在每一页中打印带有自定义标题的网页, 以下是我的打印媒体CSS代码
@media screen {
header.onlyprint, footer.onlyprint,.watermark{
display: none; /* Hide from screen */
}
}
@page {
size:A4;
}
@media print {
@page {
size:auto;
margin-top:2mm;
}
html{
margin-top: 20mm;
}
header.onlyprint {
position: fixed; /* Display only on print page (each) */
top: 0; /* Because it's header */
margin-top: 0;
}
}
HTML代码是:
<header class="onlyprint">
<img src="images/logo.png"/>
</header>
但问题仅在第一页徽标打印正确,而从第二页开始,徽标与正文内容重叠。HTML 的 CSS 无法从第二页开始工作。
似乎仅使用 CSS 无法正确实现此任务。
我在这里找到了使用表格的IE和Firefox的解决方法:http://www.jessicaschillinger.us/2017/blog/print-repeating-header-browser/
该链接内容的快速摘要:IE 和 Firefox 将在每个打印页面上重复<thead>
元素,而<tbody>
将连续打印而不会重复。