Page breaks in Visualforce PDF templates

September 23, 2008 Appirio


The Visualforce page component defines a renderAs attribute that supports certain content converters. This is extremely useful when automatically printing forms, receipts, reports, etc. Often, we’re asked to create nicely formatted forms that span multiple pages. If you leave the control of page breaks to the browser unexpected things can happen. This is an easy solution to solve with some basic CSS. You can use the page-break style properties to control where the browser will insert a page break. The PDF content converter will carry that over to the PDF.

Here’s the basic code to demonstrate how this works. Create a new Visualforce Page called MultiPagePDF. Add the following code to the page:

This is page one

This should be rendered as page two

And, finally… page three

9-14-2008 4-24-54 PM This should yield something like this illustration when rendered. Some natural extensions to this posting would be to dynamically insert these into the page. Inserting

tags and binding the style to an APEX property could be one way to accomplish this. You would pass back a blank style in some cases and return a string with the value of “page-break-after:always” for
sections where a break is needed.

As a quick side note, you can get a bit more advanced with the Page formatting via CSS. The following snippet shows you have to switch the page layout to landscape and add page numbers to your Visualforce page. This was found in the Case History Timeline example.

@page {
/* Landscape orientation */

/* Put page numbers in the top right corner of each
page in the pdf document. */
@top-right {
content: "Page " counter(page);

Previous Article
Google Earth Integration via Visualforce
Google Earth Integration via Visualforce

Dan Guggenheim   The VisualForce “contentType” page attribute makes it easy to push data from Salesforce di...

Next Article
Access Custom Fields on Standard Objects in IDE
Access Custom Fields on Standard Objects in IDE

Kyle Freeman I recently created a new Project in Eclipse, but was surprised to find that there wa...