使用 CSS 创建页眉和页脚进行打印答案

【问题标题】：Creating page headers and footers using CSS for print使用 CSS 创建页眉和页脚进行打印
【发布时间】：2012-04-01 12:50:59
【问题描述】：

我正在使用 Flying Saucer（将 CSS/HTML 转储到 iText 到 PDF）创建 PDF，并且我正在尝试使用 CSS3 将图像页眉和页脚应用于每个页面。

我基本上想把这个 div 放在每个页面的左上角：

<div id="pageHeader">
    <img src="..." width="250" height="25"/>
</div>

我的 CSS 看起来有点像这样：

@page {
    size: 8.5in 11in;
    margin: 0.5in;

    @top-left {
        content: "Hello";
    }
}

有没有办法让我把这个 div 放在content 中？

【问题讨论】：

标签： pdf pdf-generation flying-saucer css-paged-media

【解决方案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。试试看！