2

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>
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.

0

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);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.