9

My vf page 

<apex:page renderAs="pdf" Controller="testpdf1">
    <head>
        <style type="text/css" media="print">
            @page 
            {
                size: 8.5in 11in;/* width height */
            }

            @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 align="right">Header</div>
    </div>

    <div class="footer">
        <div>Page <span class="pagenumber"/> of <span class="pagecount"/></div>
    </div>

    <div class="content">
        <p>
            <apex:repeat value="{!opp}" var="item">
                <tr>
                    <td class="tableContent">{!item.Name}</td>
                </tr>
            </apex:repeat>
        </p>
    </div>
</apex:page>

Controller

public class testpdf1
{
    public list<Account> opp{get;set;}

    public testpdf1()
    {
        opp=[SELECT Name  from Account limit 50];
    }
}

I am getting all records in pdf format but able to get header in first page only and i am not getting header from second pages how can i display header to all pages.

Improve this question
3
  • 1
    Add id="header" to your div or add position: fixed; in your css for the .header class. See if that works
    – Boris Bachovski
    Commented Jul 24, 2014 at 5:22
  • Hi thanks for the quick is reply i updated ur change but from 2nd page i am not getting logo please help me out
    – PavanFoxPro
    Commented Jul 24, 2014 at 5:29
  • Interesting... I've got very similar code in 4 of my templates, and I just tried re-creating it again, didn't work ... Looking into it
    – Boris Bachovski
    Commented Jul 24, 2014 at 6:26

2 Answers 2

Reset to default
10

I faced same issued and ended up taking help from this blog

http://forcesecret.wordpress.com/2013/06/15/visualforce-page-for-pdf-and-dynamic-header-and-footer/

Here is CSS that goes in your Static resource

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

Here is Component:

<apex:component >
<apex:attribute required="true"  type="string" name="type" description="specify header and footer type" />

<apex:stylesheet value="{!$Resource.dynaPdf}"/>
<div class="{!type}" style="background-color:rgb(175,117,161);box-shadow: 10px 10px 5px #888888;margin-bottom:200px">
<apex:componentBody />
</div>


</apex:component>

And here is page with header:

<apex:page standardStylesheets="false" id="pge" renderAs="pdf">


<c:dynapdfcomponent type="header" > 
<div>My header</div>
</c:dynapdfcomponent>
  <c:dynapdfcomponent type="footer">
<div>Page <span class="pagenumber"/> of <span class="pagecount"/></div>

</c:dynapdfcomponent>

 <div class="content">

<!----------------Your content goes here--------->
<br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br>    <br>1</br><br>1</br><br>1</br><br>1</br>
<br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br>
<br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br>    <br>1</br><br>1</br><br>1</br><br>1</br>
<br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br>    <br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br>
<br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br><br>1</br>
</div>




</apex:page>

Here is sample output

enter image description here

Improve this answer
4

The issue is in your apex:page tag. Specify the following parameters:

<apex:page renderAs="pdf" cache="false" applyHtmlTag="false" applyBodyTag="false" standardStylesheets="false" showHeader="false" sidebar="false">

And your CSS will behave properly

Improve this answer
2
  • It just turn out that only applyBodyTag="false" needs to be added in @user4986 code. Rest everything seems not required.
    – AtulRajguru9
    Commented Jul 24, 2014 at 7:02
  • I usually write the html, head and body myself. The PDF renderer is weird sometimes :)
    – Boris Bachovski
    Commented Jul 24, 2014 at 7:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .