是否有可能在每个打印页面上打印带有自定义页眉和页脚的HTML页面?

我想在每个打印页面的顶部和底部添加“UNCLASSIFIED”字样,字体为红色,Arial,大小为16pt,无论内容如何。

为了澄清,如果文档打印到5页上,那么每页都应该有自定义页眉和页脚。

有人知道使用HTML/CSS是否可行吗?


当前回答

穆罕默德·穆萨维的评论是最好的答案,所以这里出现了一个实际的答案:

在每页的顶部和底部自动重复标题/页脚。然而,tfoot并不粘到最后一页的底部。

位置:固定打印将在每页重复,页脚将粘在所有页的底部,包括最后一页-但是,它不会为其内容创造空间。

把它们:

HTML:

<header>(repeated header)</header>

<table class=paging><thead><tr><td>&nbsp;</td></tr></thead><tbody><tr><td>

(content goes here)

</td></tr></tbody><tfoot><tr><td>&nbsp;</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

其他回答

这是你只想打印的东西吗?您可以将其添加到站点上的每个页面,并使用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生成的页面,您可以简单地将其编码到一个公共文件中。

编辑:

这个答案旨在提供一种方法,在文档的物理打印版本上显示某些内容,而不以其他方式显示。然而,正如评论所指出的,当内容溢出时,它并不能解决在多个打印页面上有一个页脚的问题。

我把它留在这里,以防它有帮助。

从这个问题开始——将以下样式添加到仅打印的样式表中。此解决方案将在IE和Firefox中工作,但不适用于Chrome(截至版本21):

#header {
  display: table-header-group;
}

#main {
  display: table-row-group;
}

#footer {
  display: table-footer-group;
}

如果你可以使用javascipt,让客户端处理使用javascript布局内容,根据可用空间放置元素。

你可以使用jquery columnizer插件在固定大小的块中动态布局你的内容,并将你的页眉和页脚作为渲染例程的一部分。 http://welcome.totheinter.net/columnizer-jquery-plugin/

参见例10 http://welcome.totheinter.net/autocolumn/sample10.html

如果在操作系统中启用,浏览器仍然会添加自己的页眉或页脚。跨平台和浏览器的一致布局可能需要有条件的css。

我相信正确的答案是HTML 5和CSS3不支持在打印媒体中打印页眉和页脚。

虽然你可以用:

表 定位块

它们都有缺陷,使它们不能成为理想的通解。

多年来,我一直在寻找一个解决方案,并找到了这篇关于如何在多个页面上打印一个页脚而不重叠页面内容的文章。

我的要求是IE8,到目前为止,我发现这不能在Chrome中工作。从2018年3月1日起,它也可以在Chrome浏览器中使用

下面的例子通过设置css样式来使用表格和tfoot元素:

tfoot {display: table-footer-group;}