使用 CSS 创建页眉和页脚进行打印
Posted
技术标签:
【中文标题】使用 CSS 创建页眉和页脚进行打印【英文标题】：Creating page headers and footers using CSS for print 【发布时间】：2012-04-01 12:50:59 【问题描述】：我正在使用 Flying Saucer（将 CSS/html 转储到 iText 到 PDF）创建 PDF，并且我正在尝试使用 CSS3 将图像页眉和页脚应用于每个页面。
我基本上想把这个 div 放在每个页面的左上角：
<div id="pageHeader">
<img src="..." />
</div>
我的 CSS 看起来有点像这样：
@page
size: 8.5in 11in;
margin: 0.5in;
@top-left
content: "Hello";
有没有办法让我把这个 div 放在content 中？
【问题讨论】：
【参考方案1】：我花了很多时间在现代 Chrome、Firefox 和 Safari 上完成这项工作。我用它从 HTML 创建 PDF。您将在不重叠页面内容的情况下将页眉和页脚固定到每个页面。试试看：
CSS
<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: "Page: " counter(page);
</style>
HTML
<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>
【讨论】：
哇哦，这真的很好用！我没想到 Chrome 会在每个打印页面中重新打印position: fixed; 元素 - 但确实如此！ :D 不幸的是，页码不起作用，但我不需要对我现在正在处理的内容进行页码。
这很好用 - 虽然不清楚 .page-number 项目在哪里发挥作用。
至少在 Chrome 和 Firefox 中，现在除了初始标题外，这与页面内容重叠。【参考方案2】：
在页面上包含 both 页眉和页脚（详细说明 @Adam 的出色回答）：
<style>
@page
margin: 100px 25px;
size: letter portrait;
@top-left
content: element(pageHeader);
@bottom-left
content: element(pageFooter);
#pageHeader
position: running(pageHeader);
#pageFooter
position: running(pageFooter);
</style>
<body>
<header id="pageHeader">something from above</header>
<footer id="pageFooter">lurking below</footer>
<div>meaningful rambling...</div>
</body>
注意：为了在每个页面上重复页脚，可能需要在之前定义它其他正文内容（对于多页内容）
【讨论】：
自 2020 年 1 月起，content: element(...) 功能仅受 Firefox 支持，Chrome/Webkit/Edge 不支持。
感谢！在其他元素之前添加页脚元素有助于解决我的问题。
另外，在body 或@page 中不要有display:block;，否则running() 将不起作用。【参考方案3】：
在每个页面的顶部放置一个元素：
@page
@top-center
content: element(pageHeader);
#pageHeader
position: running(pageHeader);
见http://www.w3.org/TR/css3-gcpm/#running-elements（飞碟作品）
【讨论】：
哇，希望我早点知道这一点，我一直在与background-image 斗争，以不太完整的方式做到这一点。非常感谢！
我正在尝试采用这一点，但由于某种原因，在 Chrome 中，页眉只打印在第一页上，而页脚只打印在最后一页上。在 Firefox 中，这完全被破坏了。
它可以在 Firefox 或 Chrome 中使用吗？我都试过了，但它对我不起作用：/
@Jaro 这个问题是关于使用飞碟生成 PDF 的。如果您想在 Firefox/Chrome 中获得同样的效果，那么当您提出新问题时，您将有更高的机会获得答案。
在所有主流浏览器中使用pagedjs.org。试试看！以上是关于使用 CSS 创建页眉和页脚进行打印的主要内容，如果未能解决你的问题，请参考以下文章