Configure page headers with DOMPDF

Asked

Viewed 5,078 times

6

Is there any way to set up DOMPDF to put a header on all pages of the generated PDF?

I am generating a report and I would like all pages of the report to have the header of the first.

    //define o estilo da página pdf
$style='
    <style>
    @page {
            margin-top: 20px;
        }
#head{
background-image: url("fad.jpg");
background-repeat: no-repeat;
font-size: 25px;
text-align: center;
height: 60px;
width: 500px;
margin: 0 auto;
}
#corpo{
width: 500px;
margin: 0 auto;
}
table{
border-collapse: collapse;
}
td{
    padding: 3px;
}
    </style>';

//define o cabeçalho da página
$head='<div id="head">Lista de Compras</div>
<div id="corpo">';


//inclui a biblioteca do dompdf
require_once("lib/dompdf/dompdf_config.inc.php");

//recebendo os dados do Formulário
$quant=$_POST['quantidade'];
$tipo=$_POST['tipo'];
$produto=$_POST['produto'];
$obs=$_POST['obs'];

//define o corpo do documento
$body='
    <table border="1px" >
        <tr bgcolor="#ccc">
            <td>Quantidade</td>
            <td>Tipo</td>
            <td>Produto</td>
            <td>Obs.</td>
        </tr>
    ';
for ($i = 0; $i < count($quant); $i++) {
    $tmp='<tr>
        <td width="15%">'.$quant[$i].'</td>
        <td width="15%">'.$tipo[$i].'</td>
        <td width="40%">'.$produto[$i].'</td>
        <td width="30%"> '.$obs[$i].'</td>
        ';   
    $body=$body.$tmp;
}


//define o rodapé da página
$footer='
    </table>
    </div>
    ';

//concatenando as variáveis
$html=$head.$style.$body.$footer;

//gerando o pdf
$html = utf8_decode($html);
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("compras.pdf");
html pdf dompdf

  • How is your HTML ?

  • @Diegosouza, I edited the question and put the full code

  • Right. In your #head, puts position:fixed and forehead.

  • @Diegosouza, it didn’t work.

  • Is it not your cache ?

  • No, I already checked that

  • With the position:fixed place a position. top: 10px; left: 0; right: 0; margin: auto;.

  • Hasn’t worked yet :/

  • But let’s do it right... Equal in the same HTML. <html><head><style></style></head><body></body></html>. I mean, put on the Tagas html and head and within head puts the style, maintains the position:fixed in the #head.

  • @Diegosouza, I did everything right and it still didn’t work.

  • I will simulate on my localhost.

Show 6 more comments

1 answer

7


Ready.

Changes

  1. I put the tags html head and body in sequence, just like a page .html.
  2. Placed type="text/css". It is good to tell the browser specifically what the code is.
  3. In the header #head added position:fixed, is required to pin it to every page. I left it in the center of the page using the margin: auto, with left: 0 and right: 0. CSS normal.
  4. In the @page which controls the structure of the page itself, defined 120px top. And defined the margin-top of #head with -110 for the header not to rise above the content.
  5. I put the thead in the table header so that it repeated itself on every page. It was my choice, but you can take it if you want.
  6. I put the tbody - not within the repetitive structure - just to tell the code that from there comes the tabulated data (specify).
  7. Then I closed there at the end the tags body and html.
  8. Footer should also be position: fixed and out of the body content. As well as the header.

Code

<?php
     //define o estilo da página pdf
     $style='<html><head>
        <style type="text/css">
       @page {
            margin: 120px 50px 80px 50px;
        }
        #head{
            background-image: url("fad.jpg");
            background-repeat: no-repeat;
            font-size: 25px;
            text-align: center;
            height: 110px;
            width: 100%;
            position: fixed;
            top: -100px;
            left: 0;
            right: 0;
            margin: auto;
        }
        #corpo{
            width: 600px;
            position: relative;
            margin: auto;
        }
        table{
            border-collapse: collapse;
            width: 100%;
            position: relative;
        }
        td{
            padding: 3px;
        }
        #footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            text-align: right;
            border-top: 1px solid gray;
        }
        #footer .page:after{ 
            content: counter(page); 
        }
        </style></head><body>';

    //define o cabeçalho da página
    $head='<div id="head">Lista de Compras</div>
           <div id="corpo">';

    //inclui a biblioteca do dompdf
    require_once("dompdf/dompdf_config.inc.php");

    //recebendo os dados do Formulário
    $quant      = 22;
    $tipo       = 'Unidade';
    $produto    = 'Garrafa PET';
    $obs        = 'Sem Obs';

    //define o corpo do documento
    $body='
        <table border="1px">
            <thead>
            <tr bgcolor="#ccc">
                <td>Quantidade</td>
                <td>Tipo</td>
                <td>Produto</td>
                <td>Obs.</td>
            </tr></thead><tbody>';

    for ($i = 0; $i < 130; $i++) {
        $tmp='<tr>
            <td width="15%">'.$quant.'</td>
            <td width="15%">'.$tipo.'</td>
            <td width="40%">'.$produto.'</td>
            <td width="30%"> '.$obs.'</td>';   
        $body = $body.$tmp;
    }


    //define o rodapé da página
    $footer='</tbody>
        </table>
        </div>
        <div id="footer">
            <p class="page">Página </p>
        </div></body></html>  ';

    //concatenando as variáveis
    $html=$head.$style.$body.$footer;

    //gerando o pdf
    $html = utf8_decode($html);
    $dompdf = new DOMPDF();
    $dompdf->load_html($html);
    $dompdf->render();
    $dompdf->stream("compras.pdf");

?>
  • 1

    This answer helped me a lot, because I wanted the table header on all pages and the margins of the sheet configured correctly. However, the page header still only appears on the first page. I wanted the company logo and the title on all pages.

  • 1

    I think you can update your DOMPDF, What do you think ? I used this to simulate - https://github.com/downloads/dompdf/dompdf/dompdf_0-6-0_beta3.zip

  • 1

    Thank you very much!!! It was the same version problem. Now it’s perfect!

  • 1

    lol. Ke fight! Ke good that was now.

  • Taking advantage, you know how to number the generated pages?

  • Yes. First you put this HTML <div id="footer">&#xA; <p class="page">Página </p>&#xA; </div> afterward of </div> that closes the div#corpo. Then adds the CSS #footer {&#xA; position: fixed;&#xA; bottom: 0;&#xA; width: 100%;&#xA; text-align: right;&#xA; border-top: 1px solid gray;&#xA; }&#xA; #footer .page:after{ &#xA; content: counter(page); &#xA; }. I put a gray border up, if you don’t want to just take the border-top class.

  • 1

    I changed the code in the POST for better visualization.

  • 1

    Once again, thank you so much!

  • @Zoom I have a similar problem, can you give me a hand? http://answall.com/q/126981/33193

Show 4 more comments

Browser other questions tagged html pdf dompdf

You are not signed in. Login or sign up in order to post.