CODEWITHSUNDEEP
pdf-generationdompdf
d_boggus
d_boggus

Reputation: 1019

dompdf with report header then page header and page footer

I am trying to create a pdf report using dompdf. The report needs to have the company logo on the top of the first page as well as a header and footer on every page. I have found solutions for adding a header and footer to a dompdf document elsewhere on stackoverflow. The problem I'm running into is that the company logo needs to be above the page header on the first page and not displayed on other pages

something like this

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

Is there any way of doing this using dompdf?

Upvotes: 1

Views: 3130

Answers (1)

BrianS
BrianS

Reputation: 13924

This is kludgey, but it works. You can basically fake the different headers by creating a normal header using fixed positioning and the special page 1 header using absolute positioning. If you set things up in the right order the page 1 header will be rendered on top of the standard header, obscuring it.

<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>

Upvotes: 5

Related Questions