How to make header and footer fixed and repeat on Visualforce page rendered as PDF in Salesforce | How to add header and footer in Visualforce page rendered as PDF in Salesforce

Hey guys, today in this post we are going to learn about How to make header and footer fixed and repeat on Visualforce page rendered as PDF in Salesforce.

A Visualforce page rendered as a PDF file displays either in the browser or is downloaded, depending on the browser’s settings. Specific behavior depends on the browser, version, and user settings, and is outside the control of Visualforce. To know more details, Click Here.

Don’t forget to check out:- How to find Quote owner manager’s Name and Email using apex soql query in Visualforce Salesforce. Click Here For More Information.

Final Output →

👉 Download Free Ebook →

👉 Get Free Course →

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

You can download file directly from github by Click Here.

Other related post that would you like to learn in Salesforce

Find the below steps ▾

Create Visualforce Page

Step 1:- Create Visualforce Page : pdfHeaderFooterFixedVf.vfp

From Developer Console >> File >> New >> Visualforce Page

pdfHeaderFooterFixedVf.vfp [Visualforce Page]

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

  <apex:page renderAs="pdf" applyHtmlTag="false" showHeader="false"  title="Quotation PDF" standardStylesheets="false"

           applyBodyTag="false" showQuickActionVfHeader="false">

```
 <html>
```
```
 <head>
```
```
 <style>
```
```
                @page {
```
```
                size: A4;
```
```
                margin-top: 4.0cm;
```
```
                margin-bottom: 2.6cm;
```
```
                margin-left: 0.3cm;
```
```
                margin-right: 0.3cm;
```
```
 
```
```
                @top-center {
```

                content: element(header);

```
                }
```
```
                @bottom-left {
```

                content: element(footer);

```
                }
```
```
                }
```
```
                div.header {
```
```
                display: block; 
```

                position: running(header);

```
                }
```
```
                div.footer {
```

                margin-top:20px;

```
                display: block;
```

                position: running(footer);

```
 
```
```
                }
```
```
                .pagenumber:before {
```
```
                content: counter(page);
```
```
                }
```
```
                .pagecount:before {
```

                content: counter(pages);

```
                }
```
```
 
```
```
                body {
```

                font-family: "Ubuntu", sans-serif;

                font-size: 14px;

```
                margin:0; 
```
```
                padding:0;
```
```
                }
```
```
                th {
```
```
                min-height: 15px;
```
```
                max-height: auto;
```
```
                background:#ddd;
```
```
                }
```
```
                td {
```
```
                min-height: 15px;
```
```
                max-height: auto;
```
```
                }
```

                h1, h2, h3, h4{margin:0; padding:0;}

                p{margin:4px; padding:0;}

```
 
```

                .slds-modal__container {

```
                width: 90% !important;
```

                min-width: 73rem !important;

```
                }	
```
```
 
```
```
 </style>
```
```
 </head>
```
```
 <body> 
```

            <div class="header" style="border-bottom:2px #ccc solid; background:#ddd; padding:10px; 10px 10px 10px;">

```
 
```

                <table cellspacing="0" cellpadding="0" border="0" bordercolor="#22a2db" style="width: 100%; border-collapse: collapse; border-color: #22a2db; text-align:left;">

                    <tr style="border-bottom:2px #ddd solid;">

                        <td colspan="2"><img src="{!$Label.w3webLogo}" width="auto" height="auto" style="margin:-10px 0 0 30px;"/></td>

```
 
```

                        <td style="text-align:right;">

```
 
```

                                <strong><a href="https://www.w3web.net/" target="_blank" style="color:#333; text-decoration: none;" rel="noopener noreferrer">Salesforce Application</a></strong>

```
 
```
```
 
```

                                <a href="https://www.w3web.net/" target="_blank" style="color:#333; text-decoration: none;" rel="noopener noreferrer">A online cloud based platform</a>

```
 
```
```
 </td>
```
```
 
```
```
 </tr>
```
```
 
```
```
 
```
```
 </table>
```
```
 
```
```
 </div>
```
```
 <div class="footer">
```

                <div style="border-bottom:5px #22a2aa solid;">

                    <table cellspacing="0" cellpadding="0" border="0" style="width: 100%; border-collapse: collapse; border-color: #333; text-align:left; border-bottom:5px #22a2db solid;">

                        <tr style="font-size:16px;">

                            <td style=" font-size:12px; text-align:center; ">

                                <div style="position:relative; border-top:1px #22a2db solid; padding-top:20px;">

```
 
```

                                       <strong><a href="https://www.w3web.net/" target="_blank" style="color:#2869e0;" rel="noopener noreferrer">Salesforce Application</a></strong>

                                    </p>

```
 
```

                                        <a href="https://www.w3web.net/" target="_blank" style="color:#2869e0;" rel="noopener noreferrer">A online cloud based platform</a>

                                    </p>

                                    <br/>

```
 </div>
```
```
 </td>
```
```
 </tr> 
```
```
 </table>
```
```
 </div>
```
```
 </div>
```
```
 
```
```
 <div class="content">
```
```
 
```

                <p style="font-size:17px;">

                    <strong>w3web.net</strong> is the place where you can learn step-by-step about Blog, WordPress, Salesforce Lightning Component, Lightning Web Component (LWC), Visualforce, Technical of Computer Application, Salesforce Plugin, JavaScript, Jquery, CSS, Computer & Accessories, Software Configuration, Customization, Development and much <a href="https://www.w3web.net/" target="_blank" style="color:#333;" rel="noopener noreferrer"><strong>more…</strong></a>

```
 
```
```
 
```
```
 
```
```
 
```

                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

```
 
```
```
 
```
```
 
```
```
 
```

                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

```
 
```
```
 
```
```
 
```
```
 
```

                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

```
 
```
```
 
```
```
 
```

                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

```
 
```
```
 
```
```
 
```
```
 
```

                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

```
 
```
```
 
```
```
 
```
```
 
```

                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

```
 
```
```
 
```
```
 
```

                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

```
 
```
```
 
```
```
 
```
```
 
```

                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

```
 
```
```
 
```
```
 
```
```
 
```

                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

```
 
```
```
 
```
```
 
```

                    Vijay Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

```
 
```
```
 
```
```
 
```
```
 
```
```
 
```
```
 
```
```
 
```

                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

```
 
```
```
 
```
```
 
```
```
 
```

                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

```
 
```
```
 
```

                <!--Start page-break -->

```
 
```

                <div style="page-break-after:always;"></div>

```
 
```
```
 
```
```
 
```
```
 
```

                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

```
 
```
```
 
```
```
 
```
```
 
```

                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

```
 
```
```
 
```
```
 
```
```
 
```

                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

```
 
```
```
 
```
```
 
```
```
 
```
```
 </div>
```
```
 </body>
```
```
 </html> 
```
```
</apex:page>
```

Further post that would you like to learn in Salesforce

TechW3web:- To know more, Use this Link – YouTube

FAQ (Frequently Asked Questions)

How do I add a footer to a Visualforce page rendered as PDF?

After the @page definition, we can add the information to the footer inside with class='footer'. The 'footer' class will set the content inside the to the bottom-center of the page and display it on every page. We also added span id='pageNum' which shows the page number after the company information.

How to save a VF page rendered as PDF to notes and attachments?

Save the Attachment as PDF using Apex Class and Visualforce Page on click button in Salesforce. You can use the PageReference. getContentAsPDF() method in Apex to render a Visualforce page as PDF data. Then use Apex code to convert that PDF data to an email attachment, a document, a Chatter post, and so on.

What is the use of render in VF page?

A Visualforce component in a VF page can be displayed or hidden by using a rendered attribute. Rendered is bound to a Boolean variable in the controller which can be switched between true and false making the VF component display or hide depending on a Boolean value.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

How to make header and footer fixed and repeat on Visualforce page rendered as PDF in Salesforce | How to add header and footer in Visualforce page rendered as PDF in Salesforce

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

Create Visualforce Page

pdfHeaderFooterFixedVf.vfp [Visualforce Page]

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

How do I add a footer to a Visualforce page rendered as PDF?

How to save a VF page rendered as PDF to notes and attachments?

What is the use of render in VF page?

Related Topics | You May Also Like

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

Vijay Kumar

Leave a Comment Cancel reply