It is about how we can put header and footer in a visual force page which is rendered as PDF.
<head>
<style>
@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 Footer in center" ;
font-size : 10 px;
color : #808080;
}
}
</style>
</head>
Now if we want to add a image in header then add:
@top-center {
content : element(header);
}
div.header {
position : running(header) ;
}
in style and
<div class="header">
<apex:image value="Image URL" />
</div>
before the body. We can also change font-size , font family , color etc of page using @page style.
<head>
<style>
@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 Footer in center" ;
font-size : 10 px;
color : #808080;
}
}
</style>
</head>
Now if we want to add a image in header then add:
@top-center {
content : element(header);
}
div.header {
position : running(header) ;
}
in style and
<div class="header">
<apex:image value="Image URL" />
</div>
before the body. We can also change font-size , font family , color etc of page using @page style.
