Apex Code Development You need to sign in to do that
Don't have an account?
sfdcfox PDF glitch: Different sized header and footer using same source causes both to be same size
While creating a custom PDF Visualforce page, I noticed an odd glitch regarding headers and footers.
Let's say that you have an image that is on the header of one page, and on the footer of each subsequent page, but smaller (using the same URL):
<apex:page renderAs="PDF">
<head>
<style rel="stylesheet">
@page:first {
@top-left {
content: element(logo1);
}
@bottom-left {
content: none;
}
}
@page {
@bottom-left {
content: element(logo2);
}
}
#logo1 {
position: running(logo1);
}
#logo2 {
position: running(logo2);
}
#logo1 img {
height: 0.75in;
}
#logo2 img {
height: 0.25in;
}
</style>
</head>
<div id="logo1">
<img src="/servlet/servlet.FileDownload?file=015Z0000000ABCD"/>
</div>
<div id="logo2">
<img src="/servlet/servlet.FileDownload?file=015Z0000000ABCD"/>
</div>
<div style="page-break-after: always">
Page 1 sample content
</div>
<div>
Page 2 sample content
</div>
</apex:page>
When you try to render this, you'll find that both images are the same size! The solution to this problem is to make the URLs unique. In the example above, I changed the URLs as follows:
/servlet/servlet.FileDownload?file=015Z0000000ABCD&ver=1 ... /servlet/servlet.FileDownload?file=015Z0000000ABCD&ver=2
The Visualforce rendering engine then correctly assigns a different size to each element, and they will appear as they should.
I'm not sure if this is supposed to work this way, or if there's some other CSS that needs to be used to render the images properly without using a URL parameter, but I thought I'd throw this out there and see if I'm just doing it wrong, or if it really is a glitch.