Loading

How to Format a Salesforce Visualforce Page Rendered as a PDF Using CSS

Fecha de publicación: Apr 24, 2026
Descripción

Salesforce Visualforce allows developers to render pages as PDF documents by setting the renderAs="pdf" attribute on the apex:page component. These PDF documents can be formatted using CSS to control layout properties such as paper size, margins, page headers, page footers, and page numbering.
This is useful when you need to generate professional, multi-page PDF documents from Salesforce data — for example, a branded quote, invoice, or report that requires consistent headers and footers across all pages and controlled page breaks between sections.

Solución

How CSS Formatting Works in Visualforce PDFs

Visualforce PDF rendering uses the Flying Saucer library, which supports a subset of CSS 2.1 and some CSS 3 features. The key CSS construct for controlling PDF layout is the @page rule, which lets you define page size, margins, and content in the header and footer of every page.

What the Example Code Achieves

The following Visualforce page demonstrates how to create a PDF document with these properties:

  • Paper size: US Letter (8.5 × 11 inches)
  • Margins: 25mm on all sides
  • Header: The text "Sample" centered at the top of every page
  • Footer: Page numbering in the format "Page 1 of 3" centered at the bottom of every page
  • Page breaks: Each <div> element with the class page-break forces the content onto a new page

Key CSS properties explained:

  • @page { size: letter; } — sets the paper size to US Letter.
  • @page { margin: 25mm; } — sets 25mm margins on all sides.
  • @top-center { content: "Sample"; } — places the static text "Sample" in the center header of every page.
  • @bottom-center { content: "Page " counter(page) " of " counter(pages); } — uses CSS counters to display the current page number and total page count.
  • .page-break { display: block; page-break-after: always; } — forces a page break after each element with this class.
  • body { font-family: Arial Unicode MS; } — sets a Unicode-compatible font to support special characters.

Visualforce page attributes used:

  • renderAs="pdf" — triggers PDF rendering.
  • showHeader="false" and sidebar="false" — removes the Salesforce header and sidebar from the PDF.
  • standardStylesheets="false" — prevents Salesforce default stylesheets from interfering with your custom CSS.
  • applyBodyTag="false" and applyHtmlTag="false" — allows you to define your own <html> and <body> tags for full layout control.
Note: The provided solution may not work for all layout scenarios. You may need to enable or disable apex:page options (such as applyBodyTag or applyHtmlTag) to achieve the desired PDF output. Test with your specific content and browser environment.
<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>
Número del artículo de conocimiento

000385121

 
Cargando
Salesforce Help | Article