0

I am having an issue with generating a pdf file with the following code. The issue I am facing is that I want the header to show on every page of the pdf and the content not to go out of bounds. Can anyone assist me with this. Following code & images below:

Code

<apex:page controller="StandardProductDisplayController" renderAs="pdf"  applyBodyTag="false" showHeader="false">

    <head>
        <style type="text/css" media="print">
            @page {

            size: landscape;

            @top-center {
            content: element(header);
            }
            @bottom-left {
            content: element(footer);
            }
            }
            div.content{
            padding-top:10px;
            position: left;
            }
            div.header {
            padding: 0px;
            position: running(header);
            }
            div.footer {
            display: block;
            padding: 5px;
            position: running(footer);
            }
            .pagenumber:before {
            content: counter(page);
            }
            .pagecount:before {
            content: counter(pages);
            }
            .mainContent{
            font-size: 12px;
            text-align:center;
            padding-top:10px; 
            padding-bottom:10px; 
            padding:3px 7px 2px 7px;  
            border: 1px solid #444;
            }
        </style>
    </head>

<div class="header">

    </div>
    <div>
            <table align="left">
                <thead>

                    <tr>
                        <th width="15%" style="font-size: 12px;text-align:center;padding-top:5px; padding-bottom:4px; padding:3px 7px 2px 7px; background-color:#444; color:#fff;border:1px solid #444">Product Picture</th>
                        <th width="25%" style="font-size: 12px;text-align:center;padding-top:5px; padding-bottom:4px; padding:3px 7px 2px 7px; background-color:#444; color:#fff;border:1px solid #444">Version</th>
                    </tr>
                </thead>
                <tbody class="content">
                    <apex:repeat value="{!records}" var="record">
                    <tr>    
                        <td style="font-size:12px;border:0.1px solid #000;padding:3px 7px 2px 7px;" align="center"><apex:image id="theImage" value="{!record.URL_Picture__c}" width="35" height="35"/></td>
                        <td style="font-size:12px;border:0.1px solid #000;padding:3px 7px 2px 7px;"></td>

                   </tr>
                        </apex:repeat>
                </tbody>
            </table>
    </div>



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

</apex:page>

Image of the pdf and what I want to be shown.

enter image description here

Notes:

  • Where it stated 1 means that the top header needs to be generated below on every page.
  • Where is stated 2 means that the content should end there, so it will give enough space for the footer and won't go over the header.

Any help it will be highly appreciated.

Thanks, Darko

Improve this question

1 Answer 1

Reset to default
0

Download and deploy the git repository from PDFHeaderFooter component

This is a reusable component that handles creating the elements so that they have the proper CSS tags. The end result is a Visualforce component called PDFHeaderFooter and also a CSS file to accompany it called PDFDocumentStyle.The component has allowed for code-reuse across all of the PDF generated documents that you have to provide for users.

enter image description here

<apex:page renderas="pdf">  
<!-- Stylesheets -->
<apex:stylesheet value="{!$Resource.PDFDocumentStyle}" />

<!-- First Page Header -->
<c:PDFHeaderFooter type="header" position="left">
    <div style="padding: 10px; background-color: #ccc">Your Logo Here</div>
</c:PDFHeaderFooter>
<c:PDFHeaderFooter type="header" position="center">First Center Header Text</c:PDFHeaderFooter>
<c:PDFHeaderFooter type="header" position="right">First Right Header Text</c:PDFHeaderFooter>

<!-- All Pages Header -->
<c:PDFHeaderFooter type="header" position="left">
    <div style="padding: 10px; background-color: #ccc">Your Logo Here</div>
</c:PDFHeaderFooter>
<c:PDFHeaderFooter type="header" position="center">Second Center Header Text</c:PDFHeaderFooter>
<c:PDFHeaderFooter type="header" position="right">Second Right Header Text</c:PDFHeaderFooter>

<!-- All Pages Footer -->
<c:PDFHeaderFooter type="footer" position="left">First Left Footer Text</c:PDFHeaderFooter>
<c:PDFHeaderFooter type="footer" position="center">First Center Footer Text</c:PDFHeaderFooter>
<c:PDFHeaderFooter type="footer" position="right" showPageNumbers="true"/>

<!-- Content -->
<h1 style="padding-top: 3000px; background-color: #eee;">My Test Document</h1>
<p>Test text</p>

<!-- Last Page Footer -->
<c:PDFHeaderFooter type="footer" position="left">Second Left Footer Text</c:PDFHeaderFooter>
<c:PDFHeaderFooter type="footer" position="center">Second Center Footer Text</c:PDFHeaderFooter>
<c:PDFHeaderFooter type="footer" position="right" showPageNumbers="true"/>

This is a CSS approach that works really well and even allows for first page or last page only headers/footers to be specified with some creative layout of html tags.

Hope it helps you. Just you need to call this visualforce component in your visualforce page.

Improve this answer

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.