6

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.

  • 1
    Add id="header" to your div or add position: fixed; in your css for the .header class. See if that works – Boris Bachovski Jul 24 '14 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 Jul 24 '14 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 Jul 24 '14 at 6:26
8

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|||||
3

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|||||
  • It just turn out that only applyBodyTag="false" needs to be added in @user4986 code. Rest everything seems not required. – AtulRajguru9 Jul 24 '14 at 7:02
  • I usually write the html, head and body myself. The PDF renderer is weird sometimes :) – Boris Bachovski Jul 24 '14 at 7:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.