是否可以在每个打印页面上打印带有自定义页眉和页脚的HTML页面?
我想在每个打印页面的顶部和底部添加大小为16pt的红色,Arial字体的“ UNCLASSIFIED”一词,而不管其内容如何。
为了说明清楚,如果将文档打印在5页上,则每页应具有自定义的页眉和页脚。
有人知道使用HTML / CSS是否可能吗?
#1楼
使用分页符定义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;
}
}
然后将标记添加到文档中的适当位置:
unclassified
unclassified
unclassified
unclassified
unclassified
unclassified
unclassified
unclassified
unclassified
参考文献
#2楼
从这个问题开始 -将以下样式添加到仅打印样式表中。 此解决方案将在IE和Firefox中运行,但不能在Chrome (自21版开始)中运行:
#header {
display: table-header-group;
}
#main {
display: table-row-group;
}
#footer {
display: table-footer-group;
}
#3楼
这是您只想打印的东西吗? 您可以将其添加到网站上的每个页面,然后使用CSS将标记定义为仅打印介质。
例如,这可能是示例标头:
UNCLASSIFIED
然后在CSS中执行以下操作:
.printspan
{
display: none;
}
.printspan
{
display: inline;
font-family: Arial, sans-serif;
font-size: 16 pt;
color: red;
}
最后,要在每个页面上包含页眉/页脚,您可以使用服务器端包含,或者如果您使用PHP或ASP生成任何页面,则只需将其编码到一个通用文件中即可。
编辑:
此答案旨在提供一种在文档的物理打印版本上显示某些内容而不会另外显示的方式。 但是,正如评论所暗示的那样,当内容溢出时,它不能解决在多个打印页面上放置页脚的问题。
如果有帮助,我会留在这里。
#4楼
如果可以使用javascipt,请让客户端句柄使用javascript布置内容,以根据可用空间放置元素。
您可以使用jquery columnizer插件在固定大小的块中动态布置内容,并将页眉和页脚定位为渲染例程的一部分。 http://welcome.totheinter.net/columnizer-jquery-plugin/
如果在os中启用,浏览器仍会添加自己的页眉或页脚。 跨平台和浏览器的一致布局可能需要有条件的CSS。
#5楼
我的要求是IE8,到目前为止,我发现这在Chrome中不起作用。 [ 更新 ]截至2018年3月1日,它也适用于Chrome浏览器
本示例通过设置css样式来使用表格和tfoot元素:
tfoot {display: table-footer-group;}