Loading

Add page header or footer into a Visualforce page rendered as PDF

게시 일자: May 29, 2026
상세 설명

Salesforce Visualforce pages support rendering as PDF for printing or downloading using the renderAs="pdf" attribute on the apex:page component. To include a persistent header or footer element on every page of the rendered PDF — such as "Page 1 of 2" or an account name header — you can use CSS @page rules with running elements. This approach defines header and footer content that automatically repeats on each page of the PDF output.

솔루션


To add persistent headers and footers to a PDF-rendered Visualforce page, use CSS @page rules with running elements. This approach leverages the position: running() CSS property — supported in Salesforce's PDF rendering engine — to define content that repeats on every page of the output.
The implementation involves three key components:

  1. An @page CSS rule that defines where the header and footer are positioned using @top-center and @bottom-left pseudo-elements.
  2. CSS classes for div.header and div.footer that use position: running() to mark those elements as running elements for the PDF renderer.
  3. CSS counters (.pagenumber:before and .pagecount:before) that automatically populate the current page number and total page count in the footer.

Understanding the sample code structure:
The @top-center rule inside the @page block places the header content (defined by the div.header element) at the top center of every PDF page. The @bottom-left rule places the footer content (defined by the div.footer element) at the bottom left. The div.header class uses position: running(header) to register the element as a running element — meaning it repeats across all pages rather than appearing only on the first page where it is defined in the HTML source. The div.footer class works the same way with position: running(footer). The {!Account.name} and {!TODAY()} Visualforce merge fields in the header div inject dynamic Salesforce record data into the PDF header. The .pagenumber:before and .pagecount:before CSS pseudo-elements use the counter(page) and counter(pages) CSS functions to auto-populate the current page number and total page count respectively in the footer.
To implement this in your Visualforce page:

  1. Set applyBodyTag="false" on the apex:page tag to allow direct HTML structure control.
  2. Place the CSS @page rule and the header/footer class definitions inside a style tag in the HTML head element.
  3. Add a div with class="header" at the top of the page body to define header content.
  4. Add a div with class="footer" after the header div to define footer content.
  5. Place your actual page body content in a div with class="content" below the header and footer divs.
  6. Set renderAs="pdf" on the apex:page component to render the page as PDF.

    Sample code for header and footer
<apex:page renderAs="pdf" applyBodyTag="false" standardController="Account">
        <head>
                <style type="text/css" media="print">
                       @page {
                                 @top-center {
                                       content: element(header);
                               }
                               @bottom-left {
                                     content: element(footer);
                               }
                            }
                                     div.header {
                                      padding: 10px;
                                      position: running(header);
                           }
                       div.footer {
                                display: block;
                             padding: 5px;
                               position: running(footer);
                      }
                                     .pagenumber:before {
                                        content: counter(page);
                       }
                                   .pagecount:before {
                             content: counter(pages);
                        }
                    </style>
              </head>
           <div class="header">
              <div>Account name is: {!Account.name} ----------- and the date is {!TODAY()}</div>
           </div>
           <div class="footer">
                <div>Page <span class="pagenumber"/> of <span class="pagecount"/></div>
          </div>
          <div class="content">
               <p>Actual page body information.</p>
          </div>
</apex:page>

Additional resources

Knowledge 기사 번호

000385370

 
로드 중
Salesforce Help | Article