dompdf与报告标题然后页眉和页脚

时间:2012-11-08 18:44:14

标签: pdf-generation dompdf

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

类似这样的事情

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

有没有办法用dompdf做这个?

1 个答案:

答案 0 :(得分:5)

这是kludgey,但它确实有效。您可以通过使用固定定位创建普通标头和使用绝对定位的特殊页面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>