是否有可能在每个打印页面上打印带有自定义页眉和页脚的HTML页面?
我想在每个打印页面的顶部和底部添加“UNCLASSIFIED”字样，字体为红色，Arial，大小为16pt，无论内容如何。
为了澄清，如果文档打印到5页上，那么每页都应该有自定义页眉和页脚。
有人知道使用HTML/CSS是否可行吗?
当前回答
神奇的解决方案是把所有东西都放在一个表中。
标题:用于重复的标题。 Tfoot:重复的页脚。 Tbody:内容。
做一个单独的tr td，把所有东西都放在div里
代码:
<table class="report-container">
<thead class="report-header">
<tr>
<th class="report-header-cell">
<div class="header-info">
...
</div>
</th>
</tr>
</thead>
<tfoot class="report-footer">
<tr>
<td class="report-footer-cell">
<div class="footer-info">
...
</div>
</td>
</tr>
</tfoot>
<tbody class="report-content">
<tr>
<td class="report-content-cell">
<div class="main">
...
</div>
</td>
</tr>
</tbody>
</table>
table.report-container {
page-break-after:always;
}
thead.report-header {
display:table-header-group;
}
tfoot.report-footer {
display:table-footer-group;
}
额外:防止多页重叠。如:
<div class="main">
<div class="article">
...
</div>
<div class="article">
...
</div>
<div class="article">
...
</div>
...
...
...
</div>
这将导致溢出，将使内容在分页符内与页眉重叠。
所以>>使用:page-break-inside: avoid !与这类文章。
table.report-container div.article {
page-break-inside: avoid;
}
其他回答
我很惊讶Chrome有这么糟糕的CSS打印支持。
我的任务要求在每页上显示稍微不同的页脚。在最简单的情况下，只是递增的章节和页码。在更复杂的情况下，页脚中有更多的文本(例如几个脚注)，这可能会扩大它的大小，导致该页内容区域的内容被缩小，部分内容回流到下一页。
CSS打印不能解决这个问题，至少在目前拙劣的浏览器支持下解决不了。但在印刷之外，CSS3可以做很多繁重的工作:
https://jsfiddle.net/b9chris/moctxd2a/29/
<div class=page>
<header></header>
<div class=content>Content</div>
<footer></footer>
</div>
SCSS:
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;
}
}
There's a little more code in the example, including some Cat Ipsum; but the js in use is just there to demonstrate how much the header/footer can vary without breaking pagination. The key really is to take a column-bottom-sticking trick from CSS Flexbox and then apply it to a page of a known, fixed height - in this case, an 8.5"x11" piece of US letter-sized paper, with .5" margins leaving width: 7.5in and height: 10in exactly. Once the CSS flex container is told its exact dimensions (div.page), it's easy to get the header and footer to expand and contract the way they do in conventional typography.
例如，当脚注增加到8个而不是3个时，剩下的是页面内容的流动。在我的情况下，内容已经足够固定，我不需要担心，但我相信有办法做到这一点。首先想到的一种方法是将页眉和页脚转换为100%宽度浮动，然后用Javascript定位它们。浏览器会自动处理常规内容流的中断。
使用换行符来定义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表时如何处理换页
如果你可以使用javascipt，让客户端处理使用javascript布局内容，根据可用空间放置元素。
你可以使用jquery columnizer插件在固定大小的块中动态布局你的内容，并将你的页眉和页脚作为渲染例程的一部分。 http://welcome.totheinter.net/columnizer-jquery-plugin/
参见例10 http://welcome.totheinter.net/autocolumn/sample10.html
如果在操作系统中启用，浏览器仍然会添加自己的页眉或页脚。跨平台和浏览器的一致布局可能需要有条件的css。
我找到了一个解决这个问题的方法:
当你用“page”className分隔每一页时，你可以给“page”这个样式:
.page{
height: 1150px;
page-break-after: always;
overflow: hidden;
}
检查打印页面的预览，确保所有内容都在页面内，否则移动内容，让所有内容看起来都很整齐。
根据我的工作经验，我想我的职位是:固定工作。
body { background: #eaeaed; -webkit-print-color-adjust: exact; } .my-footer { background: #2db34a; bottom: 0; left: 0; position: fixed; right: 0; } .my-header { background: red; top: 0; left: 0; position: fixed; right: 0; } <html> <head> <meta charset=utf-8 /> <title>Header & Footer</title> </head> <body> <div> <div class="my-header">Fixed Header</div> <div class="my-footer">Fixed Footer</div> <table> <thead> <tr> <th>TH 1</th> <th>TH 2</th> </tr> </thead> <tbody> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> </tbody> </table> </div> </body> </html>
在chrome中按Ctrl+P查看每页的页眉和页脚文本。 希望能有所帮助
