Page headers and footers in renderAs=”PDF” Visualforce pages

This page Creating Professional PDF Documents with CSS and Visualforce describes how @page and @bottom-right CSS can be used to include headers and footers in paginated PDF output. But the default styling for the footer text is a largish serifed font. So this:

@page {
    @bottom-right {
        content: "{!documentName} {!claimantInsuredNumbers}/{!claim.Name} - Page " counter(page) " of " counter(pages);
    }
}

results in this in the output bottom right of each PDF page:

which if CSS is being used to style the page content can leave the footer presented in a mis-matching style.

Googling for @bottom-right results in a hit on this page Prince Page Headers and Footers that includes examples of setting styles. Borrowing from that on the assumption that the technique is generic, this change:

@page {
    @bottom-right {
        content: "{!documentName} {!claimantInsuredNumbers}/{!claim.Name} - Page " counter(page) " of " counter(pages);
        font-family: sans-serif;
        font-size: 80%;
    }
}

results in the desired styling:

PS

The :first page CSS pseudo-class is supported allowing e.g. the information to be skipped on the first page:

@page :first {
    @bottom-right {
        /* Nothing */
    }
}
Advertisements

2 thoughts on “Page headers and footers in renderAs=”PDF” Visualforce pages

  1. Nice post, one question: Are you putting your @ page css in the visual force page or a static resource? It does not seem to work either way for me.

  2. Matt,

    I have it in the page as follows:

    <apex:page renderAs="PDF" showHeader="false" sidebar="false" standardStylesheets="false"
            standardController="Journal__c" extensions="CaseManagementController">
    <head>
    <style type="text/css">
    /* Other CSS */
    /* Used in pagination - puts page number in corner */
    @page {
        @bottom-right {
            content: "Page " counter(page) " of " counter(pages);
            font-family: sans-serif;
            font-size: 80%;
        }
    }
    </style>
    </head>
    <!--  Rest of page -->
    

    and I just checked and it is still working. I note that the http://wiki.developerforce.com/page/Creating_Professional_PDF_Documents_with_CSS_and_Visualforce article talks about putting the @page and @bottom-right in an external style sheet so while I would guess that would also work for other CSS attributes perhaps there is some critical aspect in exactly how I’m doing it.

    Best of luck,
    Keith

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s