Fatal编程技术网
  • css/
  • Css 如何使用HTML在文档的每个打印页面上打印页眉和页脚？

Css 如何使用HTML在文档的每个打印页面上打印页眉和页脚？

css printing

Css 如何使用HTML在文档的每个打印页面上打印页眉和页脚？,css,header,printing,stylesheet,footer,Css,Header,Printing,Stylesheet,Footer,是否可以在每个打印页面上打印带有自定义页眉和页脚的HTML页面 我想在每个打印页面的顶部和底部添加红色、Arial字体、大小为16磅的“未分类”一词，无论内容如何 为了澄清，如果文档打印到5页上，则每一页都应具有自定义页眉和页脚 有人知道使用HTML/CSS是否可以实现这一点吗？这是您只想打印的内容吗？您可以将它添加到站点上的每个页面，并使用CSS将标记定义为仅打印的媒体 例如，这可能是一个示例标题： <span class="printspan">UNCLASSIFIED</

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

我想在每个打印页面的顶部和底部添加红色、Arial字体、大小为16磅的“未分类”一词，无论内容如何

为了澄清，如果文档打印到5页上，则每一页都应具有自定义页眉和页脚

有人知道使用HTML/CSS是否可以实现这一点吗？

这是您只想打印的内容吗？您可以将它添加到站点上的每个页面，并使用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>


.printspan
{
显示：无；
}
.printspan
{
显示：内联；
字体系列：Arial，无衬线；
字号：16号；
颜色：红色；
}
最后，要在可能使用服务器端包含的每个页面上包含页眉/页脚，或者如果您有任何使用PHP或ASP生成的页面，只需将其编码到公共文件中即可

编辑：

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

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

如果您将要作为页脚的元素设置为position:fixed和bottom:0，当页面打印时，它将在每个打印页面的底部重复该元素。这同样适用于header元素，只需将其设置为top:0即可

例如：

<div class="divFooter">UNCLASSIFIED</div>
我相信正确的答案是HTML5和CSS3不支持在
print
媒体中打印页眉和页脚

虽然您可以通过以下方式进行模拟：

  • 桌子
  • 固定位置块
它们各自都有一些缺陷，使它们无法成为理想的通用解决方案。

我曾尝试结合tfoot和css规则来进行这场徒劳的战斗，但它只在Firefox上起作用：（.当使用纯css时，内容在页脚上流动。当使用tfoot时，最后一页上的页脚不能很好地保持在底部。这是因为表页脚用于表，而不是物理页。在Chrome 16、Opera 11、Firefox 3&6和IE6上测试

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Header & Footer test</title>

<style>

  @media screen {
    div#footer_wrapper {
      display: none;
    }
  }

  @media print {
    tfoot { visibility: hidden; }

    div#footer_wrapper {
      margin: 0px 2px 0px 7px;
      position: fixed;
      bottom: 0;
    }

    div#footer_content {
      font-weight: bold;
    }
  }

</style>
</head>

<body>

<div id="footer_wrapper">
  <div id="footer_content">
    Total 4923
  </div>
</div>


<TABLE CELLPADDING=6>

<THEAD>
<TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH> </TR>
</THEAD>

<TBODY>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
</TBODY>

<TFOOT id="table_footer">
<TR> <TH ALIGN=LEFT COLSPAN=3>Total</TH> <TH>4923</TH> </TR>
</TFOOT>

</TABLE>

</body>
</html>


页眉和页脚测试
@媒体屏幕{
div#footer#u包装器{
显示：无；
}
}
@媒体印刷品{
tfoot{可见性：隐藏；}
div#footer#u包装器{
保证金：0px 2px 0px 7px；
位置：固定；
底部：0；
}
div#footer#u内容{
字体大小：粗体；
}
}
总数4923
工作日日期管理器数量
2011年9月9日星期一凯尔西639
2012年9月9日星期二林赛596
2013年9月9日星期三兰迪1135
2014年9月9日星期四苏珊1002
2015年9月9日星期五兰迪908
2016年9月9日星期六林赛371
Sun 09/17 Susan 272
2011年9月9日星期一凯尔西639
2012年9月9日星期二林赛596
2013年9月9日星期三兰迪1135
2014年9月9日星期四苏珊1002
2015年9月9日星期五兰迪908
2016年9月9日星期六林赛371
Sun 09/17 Susan 272
2011年9月9日星期一凯尔西639
2012年9月9日星期二林赛596
2013年9月9日星期三兰迪1135
2014年9月9日星期四苏珊1002
2015年9月9日星期五兰迪908
2016年9月9日星期六林赛371
Sun 09/17 Susan 272
2011年9月9日星期一凯尔西639
2012年9月9日星期二林赛596
2013年9月9日星期三兰迪1135
2014年9月9日星期四苏珊1002
2015年9月9日星期五兰迪908
2016年9月9日星期六林赛371
Sun 09/17 Susan 272
2011年9月9日星期一凯尔西639
2012年9月9日星期二林赛596
2013年9月9日星期三兰迪1135
2014年9月9日星期四苏珊1002
2015年9月9日星期五兰迪908
2016年9月9日星期六林赛371
Sun 09/17 Susan 272
2011年9月9日星期一凯尔西639
2012年9月9日星期二林赛596
2013年9月9日星期三兰迪1135
2014年9月9日星期四苏珊1002
2015年9月9日星期五兰迪908
2016年9月9日星期六林赛371
Sun 09/17 Susan 272
2011年9月9日星期一凯尔西639
2012年9月9日星期二林赛596
2013年9月9日星期三兰迪1135
2014年9月9日星期四苏珊1002
2015年9月9日星期五兰迪908
2016年9月9日星期六林赛371
Sun 09/17 Susan 272
总数4923
用于定义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>

未分类
未分类
未分类
未分类
未分类
未分类
未分类
未分类
未分类
参考资料

From--将以下样式添加到仅打印的样式表中。此解决方案适用于IE和Firefox，但（从版本21起）：

如果可以使用javascipt，那么让客户端句柄使用javascript根据可用空间放置元素来布局内容

可以使用jquery columnizer插件在固定大小的块中动态布局内容，并将页眉和页脚定位为呈现例程的一部分。

参见示例10

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

我多年来一直在搜索解决方案，并在

我的要求是IE8，到目前为止，我发现它在Chrome中不起作用。[更新]截至2018年3月1日，它在Chrome中也起作用

此示例通过设置css样式使用表和tfoot元素：

tfoot {display: table-footer-group;}
如果您使用的是Asp.net Razor引擎或Angular之类的模板引擎， 我认为你必须重新生成你的页面，把页面分成几页，然后你可以自由地标记每一页，并把页眉和页脚放在主题上。 一个例子如下：

@page{
尺寸：A4；
边缘：.9厘米；
}
@媒体印刷品{
正文.打印纸-a4{
宽度：210毫米；
高度：297mm；
}
身体{
背景：白色；
保证金：0；
填充：0；
}
P

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

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

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



tfoot {display: table-footer-group;}



<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>



<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>



<style>
  @page {
    margin: 10mm;
  }

  body {
    font: 9pt sans-serif;
    line-height: 1.3;

    /* Avoid fixed header and footer to overlap page content */
    margin-top: 100px;
    margin-bottom: 50px;
  }

  #header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    /* For testing */
    background: yellow; 
    opacity: 0.5;
  }

  #footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    font-size: 6pt;
    color: #777;
    /* For testing */
    background: red; 
    opacity: 0.5;
  }

  /* Print progressive page numbers */
  .page-number:before {
    /* counter-increment: page; */
    content: "Pagina " counter(page);
  }

</style>



<body>

  <header id="header">Header</header>

  <footer id="footer">footer</footer>

  <div id="content">
    Here your long long content...
    <p style="page-break-inside: avoid;">This text will not be broken between the pages</p>
  </div>

</body>



<div class=page>
  <header></header>
  <div class=content>Content</div>
  <footer></footer>
</div>



body {
  @media screen {
    width: 7.5in;
    margin: 0 auto;
  }
}

div.page {
  display: flex;
  height: 10in;    
  flex-flow: column nowrap;
  justify-content: space-between;
  align-content: stretch;
}

div.content {
  flex-grow: 1;
}

@media print {
  @page {
    size: letter;  // US 8.5in x 11in
    margin: .5in;
  }

  footer {
    page-break-after: always;
  }
}



@page {
    @top-center { content: element(header) }
}
@page { 
    @bottom-center { content: element(footer) }
}



position: fixed;
bottom: 0;



<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>



@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;
    }
}