Print this page

How to Format a VisualForce Page rendered as PDF

Knowledge Article Number 000004706
Description


VisualForce allows you to create PDF documents (<apex:page RenderAs="PDF">), but did you know those files can be easily manipulated with CSS, for example you can break a document on different pages, you can set footers and headers, set the page size, and add page numbering. 

Resolution


You can find a very good document on how to use CSS to format PDF files here: http://www.antennahouse.com/CSSInfo/CSS-Page-Tutorial-en.pdf

This page creates a PDF file that:

 

  • Uses "Letter" as the paper size
  • Has margins of 1/4 centimetres
  • Has a title on every page
  • Every page shows the page number in this format (page # of #)
  • Controls what content goes on each page.


Note: Provided solution may not work for all situations. You may have to enable/disable <apex:page> options to get the desired result.


 
<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>
   </html>
</apex:page>




promote demote