function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
XactiumBenXactiumBen 

PDF Headers and Footers from Controller

I've started to use CSS to generate headers and footers for my visualforce pdfs, as below:

Code:
@page
{
 @top-right
 {
  content: "My Header";
 }
 @bottom-right
 {
  content: "My Footer";
 }
}

 
Is it at all possible to generate these headers and footers from information in my controller? So, for example, I can add the name of a record in my page header.  I've noticed in CSS3 you can use 'string-set' but this doesn't seem to work (or I don't know how to work it properly).

Anyone have any insight into this?

Best Answer chosen by Admin (Salesforce Developers) 
etoeto

Although I don't think it was meant to work this way, it seems you can wrap the style-element in a head-element within your visual force page. Then it is possible to use dynamic data in the @page section.

 

See example below:



<apex:page standardController="Account" showHeader="false" renderAs="pdf" >

<head>

<style type="text/css">
            
@page {
 @bottom-center {
  content: "Account: {!account.name}";
  font-size: 8pt;
 }
 @bottom-right {
  content: "Page " counter(page) "/" counter(pages);
  font-size: 8pt;
 }
}      
</style>

</head>

<body>

  Content
  
</body>
</apex:page>

All Answers

TehNrdTehNrd
I do believe you can use regular data binding in your css markup;



Code:
In the controller:

public String getHeaderName(){
   String headerName = '"John Doe"';
   return headerName;
}

Page:

content: {!HeaderName};

 
XactiumBenXactiumBen
This doesn't seem to work for me.  I had to create a stylesheet and upload it as a static resource to be able to use the @page stuff - it wouldn't let me put @page inside style tags.  Putting  {!Header} in my stylesheet doesn't seem to work.

Maybe if I could get @page to work inside style tags then it'll solve my problem - any ideas?


Message Edited by XactiumBen on 11-07-2008 02:11 PM
TehNrdTehNrd
Definitely won't work in a static resource as those are...static. Unfortunately I'm not familiar with how @page works so maybe someone else can jump in.
gireeshzgireeshz
I have only been successful using static strings in the 'content' attribute of the header or footers in @page.

This is something i have been banging my head against for a while. Check out these other threads for more info:

http://community.salesforce.com/sforce/board/message?board.id=Visualforce&message.id=3908#M3908
http://community.salesforce.com/sforce/board/message?board.id=Visualforce&message.id=3209
http://community.salesforce.com/sforce/board/message?board.id=Visualforce&thread.id=2080&view=by_date_ascending&page=1


Hope this helps!
XactiumBenXactiumBen
I've actually made some progress with this (although it would be nicer to use the @page header stuff).  If I create a div that has a fixed position, with a top and left value of zero, then it will appear at the top of every one of my pages.  The only problem is that if one of my other divs spreads across two pages, anything on the second page will write over my div header.  The only way I can get around this is to wrap everything in divs, put a margin-top value that is sufficient to never overlap my header and use page-break-inside: never;

It's not the best of solutions, especially if your divs could potentially go over one page, but it will have to do for now.  Also, I've already voted for the PDF Header and Footer idea - I was hoping there was some trick to get this working.
VisualForceVisualForce

Hi..

Can u post ur div code here..?

 

How to insert new line in content in css file..

I have tried

@top-right {
  content: "Page /a Test";
 }

and

@top-right {
  content: "Page /00000a Test";
 }

It doesnt work..

 I need

            

 page
 test
How can I get this...
 
   

   I have store the following code as priintcss in static resource, and I have already stored logo in static resource named logo.

@page {
 
 @top-right {
  content: "Page " counter(page);
 }
                   @top-left{
                                   background-image: url('logo');                              
                  }             
}

I am using following code in VF page..

<apexage controller="HistoryCon" showHeader="false" renderAs="pdf">
 <apex:stylesheet value="{!$Resource.printcss}"/>

          I want to render a PDF file.. I can get a page number in each page but I couldnt get a image...

Is it possible to get an image as header..
etoeto

Although I don't think it was meant to work this way, it seems you can wrap the style-element in a head-element within your visual force page. Then it is possible to use dynamic data in the @page section.

 

See example below:



<apex:page standardController="Account" showHeader="false" renderAs="pdf" >

<head>

<style type="text/css">
            
@page {
 @bottom-center {
  content: "Account: {!account.name}";
  font-size: 8pt;
 }
 @bottom-right {
  content: "Page " counter(page) "/" counter(pages);
  font-size: 8pt;
 }
}      
</style>

</head>

<body>

  Content
  
</body>
</apex:page>
This was selected as the best answer
VisualForceVisualForce

Hi..

 

Ur code working fine... Thanks for ur reply...

 

 

Additional question..

 

How to add a static  image as a Header (Logo) of PDF...
XactiumBenXactiumBen

I'm sure I tried to put a style straight into my page but couldn't get this to work.  It's been a while since I tried it though so perhaps it's fine now.  That appears to be the most elegant solution anyway.

DevNVDevNV

I need the same thing - dynamic data from my controller to show up in the header of my pdf.  The @page only works for me if it is inside a css file and included in the page, not if it is directly inside the page.  Has anyone found a way to do this?
DevNVDevNV

I was able to get this working with the help of SFDC Support.  The following code works for me: 

 

<apex:page renderAs="pdf" standardController="Account">    
    <head>        
        <style type="text/css" media="print">           
            @page {                 
                @top-center {                   
                    content: element(header);               
                }
                @bottom-left {
                    content: element(footer);
                }           
            }                       
 
            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);            
            }                   
        </style>            
    </head>     
 
    <div class="header">        
        <div>Account name is: {!Account.name} ----------- and the date is {!TODAY()}</div>   
    </div>  
 
    <div class="footer">        
        <div>Page <span class="pagenumber"/> of <span class="pagecount"/></div> 
    </div>  
 
    <div class="content">       
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec nulla turpis. Suspendisse eget risus sit amet lectus ornare varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec urna purus, adipiscing accumsan massa. Nullam in justo nulla, sed placerat mauris. In ut nunc eget libero posuere luctus. Donec vulputate sollicitudin ultrices. Nulla facilisi. Mauris in sapien arcu. Phasellus sit amet quam non mi ornare tincidunt ac quis lectus.</p>
    </div>
</apex:page>

 Also I was able to move the css portion into a static resource and then in the page I just needed to include the resource between <head> </head> tags and then use a div around the dynamic text I wanted to show in the header or footer.

 

Hope that helps others searching for this same functionality.