Is there an example to generate pdf with header and footer for every page?

[khasburrahman]

Is there an example to generate pdf with header and footer for every page?
I tried using table head and table footer to create the header and footer
but it seems not yet supported as #36

<table>
  <thead>
     <tr>
        <th>
           header header header </br>
           header header header </br>
        </th>
     </tr>
  </thead>


  <tbody>
     <tr>
        <td>
              content content content </br>
              ... long content ...
              content content content </br>
        </td>
     </tr>
  </tbody>


  <tfoot>
     <tr>
        <td>
            footer footer footer </br>
            footer footer footer </br>
        </td>
     </tr>
  </tfoot>
</table>

then I came up with style position:fixed css attribute

<div style="position:fixed; top: 1cm; left: 1cm;">
  header header header </br>
  header header header </br>
</div>
<div style="margin-top: 2cm;" >
  content content content </br>
  ...long content...
  content content content </br>
</div>
<div style="position:fixed; bottom: 1cm; left: 1cm;" >
  footer footer footer </br>
  footer footer footer </br>
</div>

it works but the content is overlapping with the header / footer
margin-top is only works on the first page.
any idea / example for this problem ? Thanks

[ramonski]

Hi @khasburrahman,

you probably need to define the margins in the @page descriptor:

@page {
  /* width/height according to the format */
  size: 210.0mm 297.0mm;

  /* margins on every page */
  margin-top: 10.0mm;
  margin-right: 20.0mm;
  margin-bottom: 20.0mm;
  margin-left: 20.0mm;
}

another solution if your footer contains only a single text line could be this:

@page {
  @bottom-center {
    content: 'Here comes a simple footer text';
  }
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
  }
}

The final solution would be however to have running CSS headers/footers, which is not supported (yet?) by WeasyPrint, see #598

But this would be actually a thing I'm also highly interested in;)

[khasburrahman]

Hi @ramonski
I already tried using margin in @page but postion:fixed starts after the margin too

I would like to have rich html header / footer, so @page @bottom-center isn't sufficent 😄

[Tontyna]

With a negative top or bottom value you can move the position:fixed out of the overlapping area.

[liZe]

There's also a discussion about that on #92. I'm closing this issue, but discussion is welcome in #92!