2

I generating the pdf and i am getting header border in first page only. from the 2nd page i am not able to get border in the header. How can i get the border.. below is the code for vf page..

<apex:page renderas="PDF" showHeader="false" applyHtmlTag="false" applyBodyTag="false">
    <html>
    <head>
        <style type="text/css">
           @page { 
                size: letter portrait;
                margin-top: 100px;
                margin-bottom: 100px;

                @top-left {
                    content: element(header_left);
                }

                @top-center {
                    content: element(header_center);
                }

                @top-right {
                    content: element(header_right);
                }

                @bottom-left {
                    content: element(footer_left);
                }

                @bottom-center {
                    content: element(footer_center);
                }

                @bottom-right {
                    content: element(footer_right);
                }
            }

            .header_left {
                text-align: left;
                position: running(header_left);
            }

            .header_center{
                text-align: center;
                position: running(header_center);
            }

            .header_right {
                text-align: right;
                position: running(header_right);
            }

            .footer_left {
                text-align: left;
                position: running(footer_left);
            }

            .footer_center {
                text-align: center;
                position: running(footer_center);
            }

            .footer_right {
                text-align: right;
                position: running(footer_right);
            }

            .pageNumber:before {
                content: counter(page); 
            }

            .pageCount:before {
                content: counter(pages);  
            }
            .header{
                border-bottom: 2px dotted #cccccc;
            }
        </style>
    </head>
    <div class="header">
        <c:MyComponent type="header" position="left">
            <!-- left image-->
        </c:MyComponent>
        <c:MyComponent type="header" position="center"><!-- title--></c:MyComponent>
        <c:MyComponent type="header" position="right"><!-- right text--></c:MyComponent>
    </div>
    <div class="footer">
        <c:MyComponent type="footer" position="right" showPageNumbers="true"></c:MyComponent>
    </div>
    <apex:form >
        <!-- content of body-->
    </apex:form>
    </html>
</apex:page>

Here is the Component:

<!-- Component Attributes -->
<apex:attribute type="string" name="type"
    description="Determines if the component renders as a header or footer" />


<apex:attribute type="string" name="position"
    description="Determines if component should render the text on the left, center, or right" />

<apex:attribute type="boolean" name="showPageNumbers"
    description="Determines if the header/footer information displays the page number information." />

<!-- Component Variables -->    
<apex:variable var="styleClass" value="{!LOWER(type)}_{!LOWER(position)}"/>

<!-- Component Body -->
<apex:outputPanel id="panelHeaderFooter" 
    styleClass="{!styleClass}"
    layout="block">

    <apex:outputPanel layout="none" rendered="{!showPageNumbers}">
        <div>Page <span class="pageNumber"/> of <span class="pageCount"/> </div>
    </apex:outputPanel>

    <apex:componentBody />
</apex:outputPanel>

|improve this question
  • I have the lower border on first page header image. The subsequent pages do not have the border. I want to remove the border entirely on the first page too. – sfdcFanBoy Aug 10 '17 at 7:34
  • Do you get any part of the header on your second page, or nothing at all? – Kasper Aug 10 '17 at 10:45
2
+50

Did a little poking around and found this post on the Dev forums:

https://developer.salesforce.com/forums/?id=906F000000096O7IAI

Looks like he's doing exactly what you want, and he figured out how to replicate header and footer on every page.

He cites the key CSS as:

@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);
}

Didn't try it myself, but it looks like exactly what you're looking for. Hope this helps you out! :)

|improve this answer
2

I don't know that you'll ever reliably get what you're attempting to do to work. At the root of your issue is this:

Components to Use with Caution When Rendering as PDF

<apex:attribute>
<apex:column>
<apex:component>
<apex:componentBody>
<apex:dataTable>

Edited to add: the fact you're using a Visualforce component makes it more difficult for the PDF render engine to calculate how much space to allow for the header and footer on each page when laying out your document. The PDF render engine is essentially a print compiler or "rasterizer" that is attempting to layout and paginate your entire document so it can create instructions for printing it.

Adding your component to the mix obfuscates that process for the render engine. I'd strongly urge you to abandon this approach rather than attempting to make it work.

|improve this answer
  • I've used apex:dataTable and apex:column for a few years in pdfs now without any adverse effects. Would you perhaps know of an example of when it doesn't? (Peculiarly enough, the page on apex:dataTable doesn't even mention you should use it with caution in pdfs.) – Kasper Aug 11 '17 at 14:45
  • What I can tell you is that HTML Tables are far more reliable than VF data tables for consistent output via PDF. Note that data tables fall into the category of "Use with Caution", not as being totally "Unsafe". I'd expect it to greatly depend on the content & how you want pages to break within tables. There's a flying saucer specific CSS command that works well for that with HTML tables -fs-table-paginate: paginate in a Table Style tag (dupes the border when there's a break). How well it works with VF, I can't say since I avoid using VF for PDFs. – crmprogdev Aug 11 '17 at 15:19
  • 1
    I actually use that command with apex:dataTable and haven't had a problem yet. We've made at least 10.000 pdfs with it. Maybe i'm just lucky. I did test it quite extensively before i put it live so maybe that helped. I'll have to keep your advice in mind for future projects though. – Kasper Aug 11 '17 at 19:25
0

You can add your style for the header div in your @top-etc properties. I tested this and it worked as expected by rendering the dotted line on every page. I do not know why the styling for the header div only runs on the first instance (first page) and not the rest.

            @top-left {
                content: element(header_left);
                border-bottom: 2px dotted #cccccc;
            }

            @top-center {
                content: element(header_center);
                border-bottom: 2px dotted #cccccc;
            }

            @top-right {
                content: element(header_right);
                border-bottom: 2px dotted #cccccc;
            }
|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.