Image and Table Header not repeated when Content runs to a second page

[eddmj]

I'm making a demo invoice pdf and when stressing the tables I've found my image and table header are stripped - are there any settings I need to turn on here, or is there anything wrong in the below?

<div id="header_content" class="header">
    <img src="https://s3.eu-west-2.amazonaws.com/XXXXX.png">
</div>
<div id="subheader_content" class="sub">
    INVOICE
</div>
<div id="subheader_contentL" class="col1">
    <strong>To:</strong><br>
    {% if prefix %}{{ prefix }}{% endif %} {% if first_name %}{{ first_name }}{% endif %} {% if last_name %}{{ last_name }}{% endif %},<br>
    {% if company_name %}{{ company_name }},<br>{% endif %}
    {% if address_line1 %}{{ address_line1 }},<br>{% endif %}
    {% if address_line2 %}{{ address_line2 }},<br>{% endif %}
    {% if address_line3 %}{{ address_line3 }},<br>{% endif %}
    {% if city %}{{ city }},<br>{% endif %}
    {% if post_code %}{{ post_code }}<br>{% endif %}
</div>
<div id="subheader_contentR" class="col2">
    <strong>From:</strong><br>
    XXXXX
</div>
<div id="main_content" class="main">
    <table style="width:100%">
        <tr>
            <th>Invoice Date</th>
            <th>Description</th>
            <th>Currency</th>
            <th>Price</th>
            <th>VAT Rate</th>
            <th>VAT</th>
        </tr>
        {% if invoices %}
        {% for invoice in invoices %}
        <tr>
            <td>{{ invoice.ref }}</td>
            <td>{{ invoice.desc }}</td>
            <td>{{ invoice.ccy }}</td>
            <td>{{ invoice.price }}</td>
            <td>{{ invoice.vatrate }}</td>
            <td>{{ invoice.vat }}</td>
        </tr>
        {% endfor %}
        {% endif %}
    </table>
</div>
<div id="second_table" class="">
    <table style="width:100%">
        <tr>
            <td><Strong>Sub Total (Net)</Strong></td>
            <td>{{ sub_total }}</td>
        </tr>
        <tr>
            <td><Strong>Total VAT</Strong></td>
            <td>{{ sub_total_vat }}</td>
        </tr>
        <tr>
            <td><Strong>Total (Gross)</Strong></td>
            <td><Strong>{{ total }}</Strong></td>
        </tr>
    </table>
</div>
<div id="sub_main" class="">

</div>
<div id="footer_content" class="footer">page <pdf:pagenumber>of <pdf:pagecount>
</div>

-->

[eddmj]

The repeating table header was solved through adding

repeat="1"

on the table tags, but image replication still not solved

[JSchulte01]

+1 for image issue in headers (static frames) not repeating

[JSchulte01]

Update on this - if you set the image as it's own static frame it will be repeated across pages. However if the image is contained within a static frame

it will not be repeated.

[cn3A13]

Hi @JSchulte01 thanks for solving this! I am having this exact same problem. what do you mean by "set the image as it's own static frame"? My image is contained within a static frame. I am new to xhtml2pdf

[JSchulte01]

See example below:

@frame header {           /* Static Frame */
            -pdf-frame-content: header;
            left: 15mm;
            width: 267mm;
            top: 15mm;
            height: 15mm;
            -pdf-frame-border: 1;
        }
@frame logo {             /* Static Frame */
            -pdf-frame-content: logo;
            left: 15mm;
            top: 15mm;
        }

Even though the logo is within the static header block, the logo block is declared as a second static block

[cn3A13]

Genius! thank you so much for demonstrating how to solve this. much appreciated

[luisza]

Could you please make a documentation page of this issue ? looks like interesting topic.

[JSchulte01]

@luisza This is still a bug. I'm looking into how to fix it properly. I don't think the work-around should be in the docs

[surfer190]

@JSchulte01 I'm still a bit unclear.

Check my example:

    @page {
        size: A4 landscape;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 20px;
        margin-bottom: 60px;
        left: 20px;
        top: 80px;
        width: 1081px;

        @frame logo {
            -pdf-frame-content: logo;
            left: 40px;
            top: 20px;
            width: 150px;
            height: 60px;
        }
}

Then in the html:

<div id="logo">
    {% if company.logo %}
    <img src="{{ company.logo.url }}">
    {% endif %}
</div>

Using this method the logo is not repeating

[JSchulte01]

try this:

<div>
    {% if company.logo %}
    <img id="logo" src="{{ company.logo.url }}">
    {% endif %}
</div>

[surfer190]

@JSchulte01 Ah I see what you mean now. Unfortunately, it is still not working for me.

[cn3A13]

this works for me:

@page {
    size: landscape; /*842 x 595 */

    @frame header_content {           /* Static Frame */
      -pdf-frame-content: header_content;
      background-image: url('/static/images/art-logo-large.jpg');
      left: 45pt; width: 200pt; top: 25pt; height: 53pt;
    }
    @frame logo {             /* Static Frame */
      -pdf-frame-content: logo;
      left: 45pt;top: 25pt;
    }

</head>
  <body>
    <img id="logo" repeat="1" src="/static/images/art-logo-large.jpg" style="width: 173pt; height: 48pt;"/>
      <div id="header2_content" class="header2_content" >
        {{ heading }}
      </div>

[surfer190]

Excellent, it is working now. For me the issue was the containing div having the height set.

.logo {
    height: 50px;
    text-align: center;
}

I removed that height and added it to the img element and it is now repeating.

<img id="logo" src="{{ company.logo.url }}" style="height: 50px;">

No need for the repeat attribute.

[bachdinhnhan]

I found out the issue which is very interesting!

With

<div id="header_content" class="header">
    <img src="https://s3.eu-west-2.amazonaws.com/XXXXX.png">
</div>

You need to remove the "height" property when you define the static @frame. So if you define the frame as below, it should be work:

@page {
    size: landscape; /*842 x 595 */

    @frame header_content {           /* Static Frame */
      -pdf-frame-content: header_content;
      background-image: url('/static/images/art-logo-large.jpg');
      left: 45pt; width: 200pt; top: 25pt;  /* ~~~height: 53pt;~~~ */
    }