Home/ Questions/Q 9109771
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T03:07:22+00:00

I am trying to create a pdf report using dompdf. The report needs to

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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