How do I specify a header/footer for html2pdf to use when rendering a pdf?

Asked 24/4, 2013 at 16:28 Answered 31/5 at 17:39

I'm using the html2pdf python library, and would like to define a header and a footer to apply to each page (including fun things, like a page count for the footer). What is the most expedient method I can use to specify headers/footers with html2pdf?

Seagirt answered 24/4, 2013 at 16:28 Comment(0)

Easy Blueberry! You can use pages and frames to define headers and footers by placing them in your HTML doc's style tag.

<html>
    <head>
    <style>
    /* Page margins are defined using CSS */
    @page {
      margin: 1cm;
      margin-top:2.5cm;
      margin-bottom: 2.5cm;

    /* Header frame starts within margin-top of @page */
      @frame header {
      -pdf-frame-content: headerContent; /* headerContent is the #id of the element */
      top: 1cm;
      margin-left: 1cm;
      margin-right:1cm;
      height:1cm;
      }

    /* Footer frame starts outside margin-bottom of @page */
      @frame footer {
        -pdf-frame-content: footerContent;
        bottom: 2cm;
        margin-left: 1cm;
        margin-right: 1cm;
        height: 1cm;
      }
    }
    </style>
    </head>
    <body>
           <div id="headerContent">I'm a header!</div>
           <p>I could be some content</p>
           <div id="footerContent">I'm a footer! <pdf:pagenumber></div>
    </body>
</html>

pdf:pagenumber is a tag used to display page count. There are many more tags included. Just refer to the official documentation!

Source: HTML2PDF Github Documentation

Albertype answered 7/5, 2013 at 6:20 Comment(0)

See if this is what needs friend. The header and footer is fixed and informs the count of pages.

<?php
/**
 * HTML2PDF Librairy - example
 *
 * HTML => PDF convertor
 * distributed under the LGPL License
 *
 * @author      Laurent MINGUET <[email protected]>
 *
 * isset($_GET['vuehtml']) is not mandatory
 * it allow to display the result in the HTML format
 */

ob_start();

// HTML template begin (no output)

?>
<style type="text/css">
<!--
    table.page_header {width: 100%; border: none; background-color: #DDDDFF; border-bottom: solid 1mm #AAAADD; padding: 2mm }
    table.page_footer {width: 100%; border: none; background-color: #DDDDFF; border-top: solid 1mm #AAAADD; padding: 2mm}

    div.niveau
    {
        padding-left: 5mm;
    }
-->
</style>
<page backtop="14mm" backbottom="14mm" backleft="10mm" backright="10mm" style="font-size: 12pt">
    <page_header>
        <table class="page_header">
            <tr>
                <td style="width: 100%; text-align: left;">
                    Exemple d'utilisation des bookmarks
                </td>
            </tr>
        </table>
    </page_header>
    <page_footer>
        <table class="page_footer">
            <tr>
                <td style="width: 100%; text-align: right">
                    page [[page_cu]]/[[page_nb]]
                </td>
            </tr>
        </table>
    </page_footer>
</page>
<?php

    // HTML end 
    // Getting the html which was not displayed into $content var
    $content = ob_get_clean();

    require_once(dirname(__FILE__).'/../html2pdf.class.php');
    try
    {
        $html2pdf = new HTML2PDF('P', 'A4', 'fr', true, 'UTF-8', 0);
        $html2pdf->writeHTML($content, isset($_GET['vuehtml']));
        $html2pdf->createIndex('Sommaire', 25, 12, false, true, 1);
        $html2pdf->Output('bookmark.pdf');
    }
    catch(HTML2PDF_exception $e) {
        echo $e;
        exit;
    }

Pleo answered 10/7, 2014 at 12:18 Comment(0)

Easy Blueberry! You can use pages and frames to define headers and footers by placing them in your HTML doc's style tag.

<html>
    <head>
    <style>
    /* Page margins are defined using CSS */
    @page {
      margin: 1cm;
      margin-top:2.5cm;
      margin-bottom: 2.5cm;

    /* Header frame starts within margin-top of @page */
      @frame header {
      -pdf-frame-content: headerContent; /* headerContent is the #id of the element */
      top: 1cm;
      margin-left: 1cm;
      margin-right:1cm;
      height:1cm;
      }

    /* Footer frame starts outside margin-bottom of @page */
      @frame footer {
        -pdf-frame-content: footerContent;
        bottom: 2cm;
        margin-left: 1cm;
        margin-right: 1cm;
        height: 1cm;
      }
    }
    </style>
    </head>
    <body>
           <div id="headerContent">I'm a header!</div>
           <p>I could be some content</p>
           <div id="footerContent">I'm a footer! <pdf:pagenumber></div>
    </body>
</html>

pdf:pagenumber is a tag used to display page count. There are many more tags included. Just refer to the official documentation!

Source: HTML2PDF Github Documentation

Albertype answered 7/5, 2013 at 6:20 Comment(0)

Thank you all for the questions and the answers. You were one of the first places I landed but couldn't quite get your solutions working. Then I found this example which is concise and worked right away.

<html>
<head>
<style>
    @page {
        size: a4 portrait;
        @frame header_frame {           /* Static Frame */
            -pdf-frame-content: header_content;
            left: 50pt; width: 512pt; top: 50pt; height: 40pt;
        }
        @frame content_frame {          /* Content Frame */
            left: 50pt; width: 512pt; top: 90pt; height: 632pt;
        }
        @frame footer_frame {           /* Another static Frame */
            -pdf-frame-content: footer_content;
            left: 50pt; width: 512pt; top: 772pt; height: 20pt;
        }
    }
</style>
</head>

<body>
    <!-- Content for Static Frame 'header_frame' -->
    <div id="header_content">Lyrics-R-Us</div>    

    <!-- Content for Static Frame 'footer_frame' -->
    <div id="footer_content">(c) - page <pdf:pagenumber>
        of <pdf:pagecount>
    </div>

    <!-- HTML Content -->
    To PDF or not to PDF
</body>
</html>

The source is the xhtml2pdf documentation on readthedocs.is.

Englishry answered 31/5 at 17:39 Comment(0)

Recommended topics

Hot tags