How to exclude the header on the first page?

The header on the first page can be removed using the setExcludeHeaderOnPages() API method.

$client->setExcludeHeaderOnPages("1");   // PHP

This is sufficient in many cases, but there is a limitation. The method removes the header content, but the blank header area at the top of the first page still remains. There are two solutions to remove the blank header area. These solutions can also be used if you want to remove the top margin from the first page and keep the margin on the other pages.

Solution 1

This solution is generic and can be used for any web page. The idea is as follows:

Print just the first page without the header.
Print the other pages with the header to a separate PDF. The conversion should compensate for the header height to achieve the correct page wrap. In the example below, we shift the HTML body element by the header height with libPdfcrowd.insertStyle(). Some web pages may need to shift other elements or use a different compensation.
Join both PDFs into a single PDF with PDF to PDF converter.

<?php
require "pdfcrowd.php";

try
{
    // create the HTML to PDF converter
    $html_to_pdf = new \Pdfcrowd\HtmlToPdfClient("demo", "ce544b6ea52a5621fb9d55f8b542d14d");

    // configure the converter with custom options, e.g. the footer with the number of the page
    $html_to_pdf->setFooterHtml("<div class='pdfcrowd-page-number' style='text-align: center'></div>");

    // convert just the 1st page to PDF
    $html_to_pdf->setPrintPageRange("1");
    $url = "https://example.com";
    $pdf = $html_to_pdf->convertUrl($url);

    // prepare the output file
    $output = fopen("output.pdf", "wb");

    // test the number of pages of the source document
    if($html_to_pdf->getTotalPageCount() === 1) {
        // we are done if the source document contains just one page
        fwrite($output, $pdf);
    } else {
        // create the PDF merger
        $pdf_to_pdf = new \Pdfcrowd\PdfToPdfClient("demo", "ce544b6ea52a5621fb9d55f8b542d14d");

        // add the 1st page PDF to the merger
        $pdf_to_pdf->addPdfRawData($pdf);

        // shift the page numbering so it starts correctly on the 2nd page
        $html_to_pdf->setPageNumberingOffset(-1);

        // define the header
        $header_height = '30pt';
        $html_to_pdf->setHeaderHeight($header_height);
        $html_to_pdf->setHeaderHtml("<body style='background-color: #eee'>source: <a href='{$url}'>{$url}</a></body>");

        // compensate the height of the header
        $html_to_pdf->setCustomJavascript("libPdfcrowd.insertStyle({style: 'body { margin-top: -{$header_height} !important; }'});");

        // convert the remaining pages
        $html_to_pdf->setPrintPageRange("2-");
        $pdf = $html_to_pdf->convertUrl($url);
        $pdf_to_pdf->addPdfRawData($pdf);

        // join all pages into PDF
        $final_pdf = $pdf_to_pdf->convert();
        fwrite($output, $final_pdf);
    }

    // close the output file
    fclose($output);
}
catch(\Pdfcrowd\Error $why)
{
    // report the error
    error_log("Pdfcrowd Error: {$why}\n");

    // rethrow the exception
    throw $why;
}

?>

Solution 2

This solution is faster as it requires only one conversion. However, it is only applicable to certain types of web pages. The idea is to insert the main content to a <table> and simulate the page header by the table's <thead> section. You can then set the negative top margin on the table to hide the header on the first page.

Let's demonstrate it on an example. Here is the original page:

<html>
    <head>
        <style>
         #nav-bar {
             height: 1in;
             background-color: gray;
         }
        </style>
    </head>
    <body>
        <div id="nav-bar">
            Top of the web page.
        </div>
        <div id="main-content">
            The main content of the web page.
        </div>
    </body>
</html>

And here is its modified version:

<html>
    <head>
        <style>
         #nav-bar {
             height: 1in;
             background-color: gray;
         }

         .reset-margins {
             margin: 0;
             padding: 0;
         }

         #header-table {
             margin-top: -1in;
             border-collapse: collapse;
         }

         #page-header {
             height: 1in;
         }

         #nav-bar {
             z-index: 1;
             position: relative;
         }
        </style>
    </head>
    <body>
        <div id="nav-bar">
            Top of the web page.
        </div>
        <table id="header-table" class="reset-margins">
            <thead>
                <tr class="reset-margins">
                    <td id="page-header" class="reset-margins">
                        1 inch PDF page header content
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr class="reset-margins">
                    <td class="reset-margins">
                        <div id="main-content">
                            The main content of the web page.
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

When you open the modified web page in a browser, it will look the same as the original web page. But when you print it, the second page will contain the header.

See the full example API playground.