3

I'm trying to get page numbering showing up on Visualforce renderAs PDF page. I was following the example provided in the developer guide, but it isn't working for me.

Here is a simple Visualforce page that I'm trying to add page numbering:

<apex:page controller="MyController" standardstylesheets="false" renderAs="pdf" showHeader="false" applyBodyTag="false">
    <head>
        <style>
            integer counter = 0; 
                @page { 
                    size: portrait; 
                    @bottom-right { 
                        content: "Page " counter(page) " of " counter(pages); 
                    } 
                } 
        </style>
    </head>
    <body>
        <div style="text-align:center;">
            Title
        </div>
        <div>
            <h2>Summary</h2>
        </div>
        <div>
            <h2>Overview</h2>
        </div>
        <div>
            <h2>Description</h2>
        </div>
        <div>
            <h2>Details</h2>
        </div>
        <div style="page-break-after:always;"/>
    </body>
</apex:page>
  • 1
    I had to use a css class as the selector for the element I wanted to place it it: <div><span class="pageNumber"/></div> then used .pageNumber:before{ content: "Page " counter(page); // " of " counter(pages); It may not be the best way but worked for me before } – Eric Jun 18 '15 at 18:45
2

From Knowledge Article : Formating VisualForce Page rendered as PDF

<apex:page renderAs="pdf" showHeader="false" sidebar="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false">
<html>
<head>
    <style>
        @page {
            size: letter;
            margin: 25mm;
            @top-center {
                content: "Sample";
            }
            @bottom-center {
                content: "Page " counter(page) " of " counter(pages);
            }
        }
        .page-break {
            display:block;
            page-break-after:always;
        }
        body {
            font-family: Arial Unicode MS;
        }
    </style>
</head>
<body>
<div class="page-break">Page A</div>
<div class="page-break">Page B</div>
<div>Page C</div>
</body>

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.