Menu
I'm using flaying saucer java library.
I'm trying to add footers to my generated pdf.
The goal is to have the same footer on each page and different content on the last page.
html>
<head>
<style type="text/css">
@page {
size: 8.5in 11in;
margin-bottom: 1in;
@bottom-left {
content: element(footer_one);
}
@bottom-right{
content: element(footer_two);
}
@bottom-center{
content: element(footer_rights);
}
}
#footer_two {position: running(footer_two); }
#footer_one {position: running(footer_one); }
#footer_three {position: running(footer_three);}
#footer_two, #footer_one, #footer_three { margin: 0 padding:0;}
#footer_three { border-top: 2px solid #3390FF;}
</style>
</head>
<body>
<div id="footer_one">
some text short text about three words, on each page
</div>
<div id="footer_two">
some text short text, like page numbers etc, on each page
</div>
<div>
Whole body content
</div>
<div id="footer_three">
some text looooooooonnnnnnnnnggggggggg text, some about ten rows. Only on last page
</div>
</body>
I'm struggling with that about few days and any advice found in the net wasn't good enough.
I was trying with
@page:last {}
or with :
@bottom-left {
content: element(footer_one, last-except);
}
@bottom-right{
content: element(footer_two, last-except);
}
but it seems that :last pseudo selector doesn't work.
The best approach would be to have totally different one footer on last page, which would include content of those three footers. I can add footer only on last page but I can't disable then those simple footers form previous pages.
Maybe there is some other approach ? I would be appreciate for any help.
504
Try this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>last footer</title>
<style type="text/css">
div.pdf-footer {
padding-top: 4pt;
position: running(footer);
}
@page {
@bottom-center {
content: element(footer, last);
}
}
</style>
</head>
<body>
<div class="pdf-footer">all pages except last</div>
<div>content</div>
<div class="pdf-footer">only last page</div>
</body>
</html>
If you know in advance what will be displayed on the last page, you can use CSS3 named pages.
Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.newpage{page-break-before:always}
@page {@bottom-center {content: element(footer)}}
#footer {position: running(footer);}
@page last {@bottom-center {content: element(lastfooter)}}
#lastfooter{position: running(lastfooter);}
#lastpage {page:last}
}
</style>
</head>
<body>
<div id="footer">Footer for all pages except last one</div>
<div id="lastfooter">Footer for last page</div>
<div>Content for all pages except last one</div>
<div class="newpage" id="lastpage">Last page content</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
