4

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
  • 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, 2015 at 18:45

1 Answer 1

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>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .