Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
vijayk3327 opened this issue Sep 13, 2023 · 0 comments
Open

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

vijayk3327 opened this issue Sep 13, 2023 · 0 comments
Labels
documentation Improvements or additions to documentation question Further information is requested

Comments

@vijayk3327
Copy link
Owner

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.

👉 Get source code live demo link:-

Create Visualforce Page
Step 1:- Create Visualforce Page : pdfHeaderFooterFixedVf.vfp

`<apex:page renderAs="pdf" applyHtmlTag="false" showHeader="false" title="Quotation PDF" standardStylesheets="false"
applyBodyTag="false" showQuickActionVfHeader="false">


<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;">
            <br/>
            <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;">
                        <p>
                            <strong><a href="https://www.w3web.net/" target="_blank" style="color:#333; text-decoration: none;" rel="noopener noreferrer">Salesforce Application</a></strong>
                        </p> 
                        <p>
                            <a href="https://www.w3web.net/" target="_blank" style="color:#333; text-decoration: none;" rel="noopener noreferrer">A online cloud based platform</a>
                        </p>
                     </td>

                </tr>


            </table>
            <br/>
        </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;">                                   
                                <p>
                                   <strong><a href="https://www.w3web.net/" target="_blank" style="color:#2869e0;" rel="noopener noreferrer">Salesforce Application</a></strong>
                                </p> 
                                <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>
            </p>
            <br/><br/>

            <p>
                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.
            </p>
            <br/><br/>

            <p>
                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.
            </p>

            <br/><br/>
            <p>
                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.
            </p>

            <p>
                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.
            </p>
            <br/><br/>

            <p>
                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.
            </p>

            <br/><br/>
            <p>
                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.
            </p>

            <p>
                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.
            </p>
            <br/><br/>

            <p>
                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.
            </p>

            <br/><br/>
            <p>
                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.
            </p>

            <p>
                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.
            </p>
            <br/><br/>


            <!--End page-break -->

            <p>
                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.
            </p>

            <br/><br/>
            <p>
                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.
            </p>

            <!--Start page-break -->

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


            <p>
                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.
            </p>
            <br/><br/>

            <p>
                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.
            </p>

            <br/><br/>
            <p>
                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.
            </p>



        </div>
    </body>
</html>

</apex:page>`

👉 Get source code live demo link:-
@vijayk3327 vijayk3327 added documentation Improvements or additions to documentation question Further information is requested labels Sep 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
documentation Improvements or additions to documentation question Further information is requested
Projects
Visualforce
Status: No status
Milestone
No milestone
Development

No branches or pull requests
1 participant
@vijayk3327