是否有可能在每个打印页面上打印带有自定义页眉和页脚的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>&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