Header in PDF Page Using Dompdf in PHP

How to add a header and footer to a PDF generated with DOMPDF and Laravel 5.8

Add style for the header and footer page.

<style>
    @page { margin: 180px 50px; }
    #header { position: fixed; left: 0px; top: -180px; right: 0px; height: 150px; background-color: orange; text-align: center; }
    #footer { position: fixed; left: 0px; bottom: -180px; right: 0px; height: 150px; background-color: lightblue; }
    #footer .page:after { content: counter(page, upper-roman); }
</style>

Add the header part inside this div.

<div id="header">

</div>

Add Footer part in the following div.

 <div id="header">

 </div>

Enable DOMPDF_ENABLE_PHP from /config/dompdf.php
Publish vendor file via php artisan vendor:publish command
Pass $pdf object from controller:
List item

You should add the following script in the view file.

<script type="text/php">
    if ( isset($pdf) ) {
        // OLD 
        // $font = Font_Metrics::get_font("helvetica", "bold");
        // $pdf->page_text(72, 18, "{PAGE_NUM} of {PAGE_COUNT}", $font, 6, array(255,0,0));
        // v.0.7.0 and greater
        $x = 72;
        $y = 18;
        $text = "{PAGE_NUM} of {PAGE_COUNT}";
        $font = $fontMetrics->get_font("helvetica", "bold");
        $size = 6;
        $color = array(255,0,0);
        $word_space = 0.0;  //  default
        $char_space = 0.0;  //  default
        $angle = 0.0;   //  default
        $pdf->page_text($x, $y, $text, $font, $size, $color, $word_space, $char_space, $angle);
    }
</script>

dompdf with report header then page header and page footer

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>

dompdf: How to add header on every page except first?

You can do this by inserting the header and footer elements after the elements that appear in the first page.

For example :

<style>
  .flyleaf {
    page-break-after: always;
  }

  .header, .footer {
    position: fixed;
  }

  .header {
    top: 0;
  }

  .footer {
    bottom: 0;
  }
</style>

<div class="flyleaf">
  Some big title
</div>

<div class="header">
  my header
</div>

<div class="footer">
  my footer blah, blah
</div>

<p>The content</p>

Edit: added the style tag

Header in PDF Page Using Dompdf in PHP

How to add a header and footer to a PDF generated with DOMPDF and Laravel 5.8

dompdf with report header then page header and page footer

dompdf: How to add header on every page except first?

Related Topics

Leave a reply