是否有可能在每个打印页面上打印带有自定义页眉和页脚的HTML页面?
我想在每个打印页面的顶部和底部添加“UNCLASSIFIED”字样,字体为红色,Arial,大小为16pt,无论内容如何。
为了澄清,如果文档打印到5页上,那么每页都应该有自定义页眉和页脚。
有人知道使用HTML/CSS是否可行吗?
是否有可能在每个打印页面上打印带有自定义页眉和页脚的HTML页面?
我想在每个打印页面的顶部和底部添加“UNCLASSIFIED”字样,字体为红色,Arial,大小为16pt,无论内容如何。
为了澄清,如果文档打印到5页上,那么每页都应该有自定义页眉和页脚。
有人知道使用HTML/CSS是否可行吗?
当前回答
我相信正确的答案是HTML 5和CSS3不支持在打印媒体中打印页眉和页脚。
虽然你可以用:
表 定位块
它们都有缺陷,使它们不能成为理想的通解。
其他回答
我找到了一个解决这个问题的方法:
当你用“page”className分隔每一页时,你可以给“page”这个样式:
.page{
height: 1150px;
page-break-after: always;
overflow: hidden;
}
检查打印页面的预览,确保所有内容都在页面内,否则移动内容,让所有内容看起来都很整齐。
从这个问题开始——将以下样式添加到仅打印的样式表中。此解决方案将在IE和Firefox中工作,但不适用于Chrome(截至版本21):
#header {
display: table-header-group;
}
#main {
display: table-row-group;
}
#footer {
display: table-footer-group;
}
我找到了一个解决方案。基本的想法是做一个表,在头部部分放置tr头部的数据,并通过css强制显示tr只在打印而不是在屏幕上,然后你的正常头部应该强制只在屏幕上显示而不是在打印。100%打印多页。示例代码在这里
<style>
@media screen {
.only_print{
display:none;
}
}
@media print {
.no-print {
display: none !important;
}
}
TABLE{border-collapse: collapse;}
TH, TD {border:1px solid grey;}
</style>
<div class="no-print"> <!-- This is header for screen and will not be printed -->
<div>COMPANY NAME FOR SCREEN</div>
<div>DESCRIPTION FOR SCREEN</div>
</div>
<table>
<thead>
<tr class="only_print"> <!-- This is header for print and will not be shown on screen -->
<td colspan="100" style="border: 0px;">
<div>COMPANY NAME FOR PRINT</div>
<div>DESCRIPTION FOR PRINT</div>
</td>
</tr>
<!-- From here Actual Data of table start -->
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</tbody>
</table>
这是你只想打印的东西吗?您可以将其添加到站点上的每个页面,并使用CSS将标记定义为仅打印的媒体。
例如,这可以是一个示例头:
<span class="printspan">UNCLASSIFIED</span>
在你的CSS中,这样做:
<style type="text/css" media="screen">
.printspan
{
display: none;
}
</style>
<style type="text/css" media="print">
.printspan
{
display: inline;
font-family: Arial, sans-serif;
font-size: 16 pt;
color: red;
}
</style>
最后,要在每个页面上包含页眉/页脚,您可以使用服务器端包含,或者如果您有任何使用PHP或ASP生成的页面,您可以简单地将其编码到一个公共文件中。
编辑:
这个答案旨在提供一种方法,在文档的物理打印版本上显示某些内容,而不以其他方式显示。然而,正如评论所指出的,当内容溢出时,它并不能解决在多个打印页面上有一个页脚的问题。
我把它留在这里,以防它有帮助。
穆罕默德·穆萨维的评论是最好的答案,所以这里出现了一个实际的答案:
在每页的顶部和底部自动重复标题/页脚。然而,tfoot并不粘到最后一页的底部。
位置:固定打印将在每页重复,页脚将粘在所有页的底部,包括最后一页-但是,它不会为其内容创造空间。
把它们:
HTML:
<header>(repeated header)</header>
<table class=paging><thead><tr><td> </td></tr></thead><tbody><tr><td>
(content goes here)
</td></tr></tbody><tfoot><tr><td> </td></tr></tfoot></table>
<footer>(repeated footer)</footer>
CSS:
@page {
size: letter;
margin: .5in;
}
@media print {
table.paging thead td, table.paging tfoot td {
height: .5in;
}
}
header, footer {
width: 100%; height: .5in;
}
header {
position: absolute;
top: 0;
}
@media print {
header, footer {
position: fixed;
}
footer {
bottom: 0;
}
}
你可以在这里添加很多细节,但我故意将其削减到最少,以获得一个干净的渲染页眉和页脚,在屏幕上出现一次,在每个打印页面的顶部和底部出现一次。
https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a