6

I am trying to render my PDF page with a header and a footer, that are actually images, and a content, that expands in more than one page.

The problems that I am facing are:

  • The Header gets rendered properly but appears as a background image, while the content starts displaying since at the beginning of the page.

  • The footer, can be seen only 30 %, while the other part of the footer, doesn't get shown.

  • The footer doesn't get wrapped in a dotted rectangle(but this is a minor issue).

    To develop this page, I've been refering to this post and I've tried to adapt it.

  1. The CSS Style used is the following(dynaPdf):
@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);
}
  1. The component used to visualize a header or footer is as follows(DynaPdfComponent):
<apex:component >
<apex:attribute required="true"  type="string" name="type" description="specify header and footer type" />

<apex:stylesheet value="{!$Resource.dynaPdf}"/>

<div class="{!type}">
    <apex:componentBody />
</div>      

  1. The visualforce page used for the test purpose, is:
<apex:page standardStylesheets="false" id="pge" renderAs="pdf" controller="DynaPdfPageCTRL">

<head>
    <style>
        div.content {
            border-style:dotted;
            float: left;
            width: 100%;
            margin-top:10cm;
            margin-bottom:10cm;
        }
    </style>
</head>

<!-- HEADER -->
<c:dynaPdfComponent type="header" > 

  <apex:image value="{!$Resource.Header_Test_ES}" height="100%" width="100%"/>

</c:dynaPdfComponent>

<!-- FOOTER -->
<c:dynaPdfComponent type="footer">

    <div>Page <span class="pagenumber"/> of <span class="pagecount"/></div>
    <apex:image value="{!$Resource.Footer_Test_ES}" width="100%" height="100%" />

</c:dynaPdfComponent>

<!-- CONTENT -->
<div class="content">
    <apex:repeat value="{!testStringList}" var="s">                    
        <b>{!s}</b>
        <br/>
    </apex:repeat>  
</div>

  1. The controller used to generate a sample list of strings (DynaPdfPageCTRL), is:
public class DynaPdfPageCTRL {
    public List<String> testStringList {
        get {
            List<String> result = new List<String>();
            for (Integer i = 1; i < 250; i++ ) {
                result.add('TEST CONTENT ' + i);
            }
            return result;
        } set;
    } 

    public DynaPdfPageCTRL() { }
}

Along with this post, I am attaching also: a) The view of the rendered page: ScreenShot b) The header image: enter image description here c) The footer image: enter image description here

Thank you so much guys. Greetings, Endrit.

10

I think the main issues is that you should put your margin measurements in the @page element and remove them from the content div. For readability, i've put this all in one VF page:

<apex:page standardStylesheets="false" id="pge" renderAs="pdf" controller="DynaPdfPageCTRL" applyHtmlTag="false" showHeader="false" >
<head>
    <style>
        @page {
            margin-top: 4cm;
            margin-bottom: 3cm;

            @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);
        }
        div.content {
            border-style:dotted;
            float: left;
            width: 100%;
        }
    </style>
</head>

<!-- HEADER -->
<div class="header">
    <apex:image value="{!$Resource.Header_Test_ES}" height="100%" width="100%"/>
</div>

<!-- FOOTER -->
<div class="footer">
    <div>Page <span class="pagenumber"/> of <span class="pagecount"/></div>
    <apex:image value="{!$Resource.Footer_Test_ES}" width="100%" height="100%" />
</div>

<!-- CONTENT -->
<div class="content">
    <apex:repeat value="{!testStringList}" var="s">                    
        <b>{!s}</b>
        <br/>
    </apex:repeat>  
</div>
</apex:page>

Notice I also had to add the following attributes to the element applyHtmlTag="false" showHeader="false"

enter image description here

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.