Skip to main content
ignacioc1892
New Participant
May 11, 2023 7:23 AM UTC
Question

Replic header in each page when convert HTML to PDF

Hi!
I am trying to generate a pdf document from an html using the "HTML to PDF" plugin.

The html structure used is the following:
// HTML <table>
  <thead><tr><td>
    <div class="header-space">&nbsp;</div>
  </td></tr></thead>
  <tbody><tr><td>
    <div class="content">...</div>
  </td></tr></tbody>
  <tfoot><tr><td>
    <div class="footer-space">&nbsp;</div>
  </td></tr></tfoot>
</table><div class="header">...</div>
<div class="footer">...</div>// CSS.header, .header-space,
.footer, .footer-space {
  height: 100px;
}.header {
  position: fixed;
  top: 0;
}.footer {
  position: fixed;
  bottom: 0;
}

The problem comes when transforming to PDF. It works by replicating the header, but from the second page the content overlaps the header.




My cloud version is 22.3

5 replies

mallepup3914
mallepup3914
Inspiring
May 11, 2023 8:16 AM UTC

To avoid this issue, you can try setting the position of the header to "absolute" instead of "fixed". This will keep the header in the normal document flow.

.header {
  position: absolute;
  top: 0;
}
.footer {
  position: fixed;
  bottom: 0;
}

ignacioc1892Author
New Participant
May 12, 2023 7:26 AM UTC

With absolute position, not replicated each page only first

stefanhelzle0001
stefanhelzle0001
Brainy
May 11, 2023 8:54 AM UTC

You can do that using specific CSS. Check the documentation of the used library: github.com/.../openhtmltopdf

jenniferg248
New Participant
Jun 28, 2024 3:58 PM UTC

Hey Stefan, there is a lot going on in the library you linked and I don't have much experience with github. Can you point to the file that refers to this topic?

allenp0001
allenp0001
Known Participant
Jun 27, 2024 12:18 PM UTC

Did you resolve this and if so, how?

Terms & ConditionsAccessibility statement