带有报告标题的 dompdf，然后是页眉和页脚答案

【问题标题】：dompdf with report header then page header and page footer带有报告标题的 dompdf，然后是页眉和页脚
【发布时间】：2012-10-29 00:56:12
【问题描述】：

我正在尝试使用 dompdf 创建一个 pdf 报告。报告需要在第一页的顶部有公司徽标，并且在每一页上都有页眉和页脚。我找到了在 dompdf 文档elsewhere on stackoverflow 中添加页眉和页脚的解决方案。我遇到的问题是公司徽标需要在第一页的页眉上方，而不是显示在其他页面上

类似的东西

Company Logo
 - header
 - content here
 - footer
 ------
 - header
 - content here 
 - footer

有没有办法使用 dompdf 做到这一点？

【问题讨论】：

老问题，但是...页眉可以保留在同一位置，还是预计在第一页上它会因为徽标而被推下？

标签： pdf-generation dompdf

【解决方案1】：

这很笨拙，但它有效。您基本上可以通过使用固定定位创建普通标题和使用绝对定位创建特殊第 1 页标题来伪造不同的标题。如果您以正确的顺序进行设置，则第 1 页的页眉将呈现在标准页眉的顶部，将其遮盖。

<html>
  <head>
    <style>
      @page {
        margin: 0px;
      }
      @page :first {
        margin-top: 100px;
      }
      body {
        margin: 100px 20px 50px 20px;
      }
      #headerA {
        position: fixed;
        left: 0px; right: 0px; top: 0px;
        text-align: center;
        background-color: orange;
        height: 90px;
      }
      #headerB {
        position: absolute;
        left: -20px; right: -20px; top: -200px;
        text-align: center;
        background-color: orange;
        height: 190px;
      }
      #footer {
        position: fixed;
        left: 0px; right: 0px; bottom: 0px;
        text-align: center;
        background-color: orange;
        height: 40px;
      }
    </style>
  </head>
  <body>
    <div id="headerA">
      <h1>Widgets Express</h1>
    </div>
    <div id="headerB">
      <img class="logo" src="http://eclecticgeek.com/images/macro/ants.jpg" height="100" width="500">
      <h1>Widgets Express</h1>
    </div>

    <div id="footer">
      <p>Copyright, all rights reserved, yadda yadda</p>
    </div>

    <div id="content">
      ...
    </div>
  </body>
</html>

【讨论】：