是否有可能在每个打印页面上打印带有自定义页眉和页脚的HTML页面?
我想在每个打印页面的顶部和底部添加“UNCLASSIFIED”字样,字体为红色,Arial,大小为16pt,无论内容如何。
为了澄清,如果文档打印到5页上,那么每页都应该有自定义页眉和页脚。
有人知道使用HTML/CSS是否可行吗?
是否有可能在每个打印页面上打印带有自定义页眉和页脚的HTML页面?
我想在每个打印页面的顶部和底部添加“UNCLASSIFIED”字样,字体为红色,Arial,大小为16pt,无论内容如何。
为了澄清,如果文档打印到5页上,那么每页都应该有自定义页眉和页脚。
有人知道使用HTML/CSS是否可行吗?
当前回答
一种只适用于为每个页面添加标题的方法是将您的内容包装在<table>中,然后将您的标题内容放在<thead>标签中,并将您的内容放在<tbody>标签中,如下所示:
<table>
<thead>
<tr>
<th>This content appears on every page</th>
</tr>
</thead>
<tbody>
<tr>
<td>Put all your content here, it can span multiple pages and your header will show up at the top of each page</td>
</tr>
</tbody>
</table>
这在Chrome上是有效的,对其他浏览器不是100%确定。
其他回答
我相信正确的答案是HTML 5和CSS3不支持在打印媒体中打印页眉和页脚。
虽然你可以用:
表 定位块
它们都有缺陷,使它们不能成为理想的通解。
@Daniel在2012年对缺乏CSS3特性支持的问题做了一个评论:顶部中心和底部中心。
好吧,在Chrome 73+,下面的片段工作,其中页眉和页脚是<header></header>和<footer></footer>元素定义在页面内。
@page {
@top-center { content: element(header) }
}
@page {
@bottom-center { content: element(footer) }
}
使用换行符来定义CSS中的样式:
@media all
{
#page-one, .footer, .page-break { display:none; }
}
@media print
{
#page-one, .footer, .page-break
{
display: block;
color:red;
font-family:Arial;
font-size: 16px;
text-transform: uppercase;
}
.page-break
{
page-break-before:always;
}
}
然后在文档中适当的位置添加标记:
<h2 id="page-one">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
参考文献
CSS分页媒体:分页符 MDN: page-break-before MDN:前 多栏布局 XHTML打印:第二版 Webkit Bug 5097: CSS2的page-break-after不能工作 打印HTML常见问题:程序是否尊重CSS样式,如分页后? 打印大型HTML表时如何处理换页
这是你只想打印的东西吗?您可以将其添加到站点上的每个页面,并使用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生成的页面,您可以简单地将其编码到一个公共文件中。
编辑:
这个答案旨在提供一种方法,在文档的物理打印版本上显示某些内容,而不以其他方式显示。然而,正如评论所指出的,当内容溢出时,它并不能解决在多个打印页面上有一个页脚的问题。
我把它留在这里,以防它有帮助。
多年来,我一直在寻找一个解决方案,并找到了这篇关于如何在多个页面上打印一个页脚而不重叠页面内容的文章。
我的要求是IE8,到目前为止,我发现这不能在Chrome中工作。从2018年3月1日起,它也可以在Chrome浏览器中使用
下面的例子通过设置css样式来使用表格和tfoot元素:
tfoot {display: table-footer-group;}