Facing problem adding footer in the last page vf rendered as pdf

Question

I want to add some text on end of the last page as footer in the vf page rendered as pdf. I have tried with @page :last { }. But It is not working. Any idea?

css:

@page {

    @top-center {

    content: element(header);

    }

    @bottom-left {

        content: element(footer);

    }
}


@page :last {
  color: green;

  @bottom-center {
    content: "text...";
    color: blue;
  }
}



div.header {

padding: 10px;

position: running(header);

}

div.footer {

display: block;

padding: 5px;

position: running(footer);

}



.pagenumber:before {

content: counter(page);

}

.pagecount:before {

content: counter(pages);

}

Page:

<div class = "header">
------
</div>
 <div class="content">
---some content--------------------
</div>
<div class = "footer">
----some content ---
</div>
<div>
</div>

Answer 1

Normally to do what you're attempting, your footer would be defined using an @page as well as an @media. You'd do the same with the psuedo-class of page:last. I don't see any markup in your page layout to provide for the last:page to appear. It would seem you'd want to include it in the div where your footer appears and have it as a child of the footer.

Here's an example of what you'd normally expect to see:

@page {
    margin : 70pt .5in .5in .5in;

    @top-center {
        content : "My Header";
     }
    @bottom-left {
        content : "My Footer on Left Side";
        font-size : 10 px;
        color : #808080;
    }
    @bottom-center {
        content : "My last page content in center" ;
        font-size : 10 px;
        color : #808080;
    }
}

You may need to do something like this where it's defined as a child of your element footer:

footer.page:last {

    // add spacing element so it appears in center

    content: text;

}

To assist with that, you may also need to relate it to a .pagenumber:last.

As a final note, it's important to remember that PDFs only support CSS 2.1, not CSS 3. So any CSS 3 notation may or may not work. Check the FlyingSaucer Documentation for the latest revisions.

Answer 2

You may @bottom of page in CSS part and then in the body use <div class="footer">

@bottom-left {
    content: element(footer);
}

div.footer {
    display: block;
    margin-left: 30px;
    font-family: Arial Unicode MS;
    font: 10pt;
    position: running(footer);
}