Skip to main content

Some PDF tricks on Visualforce: Landscape, A4, page number and more

The beauty of Visualforce is simplicity. Remember the shock you received when you were told the entire page renders as PDF if you just add renderAs=PDF to the Page tag.

For those who thought I spoke alien language right now, here is the trick, to render a page as PDF, we add a simple attribute to the <apex: page> tag

<apex: page renderAs='pdf'>
This will render the entire page as PDF.

Now, say we need to add some extra features to the PDF. Like a page number in the footer or we need to render the page in landscape mode. Faced with this problem, I put on my Indiana Jones hat and went hunting for it in the vast hay-sack of the internet (read: googled extensively). Imagine my happiness when i found a big big page with many big big examples to solve the problem. The document I am referring to is from W3C, paged Box media.

Long story short, I now possess the ultimate secret of rendering the page in any format I want. So here are few tricks I learned from the page. To perform this tricks simply add the following code to your visualforce PDF page and see it bend to your command.

1. Rendering page as landscape

@page {
/* Landscape orientation */

2. Rending page in different size

@page {
  size: 8.5in 11in;/* width height */

3. Rendering page in landscape A4

@page {
  size: A4 landscape;
4. Adding stuff in footer of the page

@bottom-right {
content: Some content;

5. Adding page number to the page

@page {
  size: 8.5in 11in;
  margin: 10%;

  @top-left {
    content: "Hamlet";
  @top-right {
    content: "Page " counter(page);

The other variations in box-model are top-left, top-center, top-right, bottom-left, bottom-right, bottom-center.

Hope this helps creating those awesome looking PDFs in visualforce. More information on many more tricks in a lot of detail can be collected from the mother ship itself.

Some more information is also given by the Quinton Wall on blog.

Toodles for now,
Hope it helps,

P.s. Those who could early book into DF11, I envy you.


  1. Also remember that if you do
    <apex:outputPanel layout="none" render="{!someboolean}">

    And have another output panel inside it will get wrapped with a span even if you put layout="none"


    Make PDF's error if you are putting that span in say before TR

  2. @David
    Thanks for the info, yes it will completely screw the layout. However if you wish to render PDF, always make sure you use table instead of divs and output panel.

  3. forcing page breaks doesn't work, unfortunately.

  4. Try the following to force a page break after the the div:

    < div style="page-break-after: always;" >
    your content here
    < /div>

  5. Has anyone found a way to add todays date to the bottom of the PDF?

    I've tried:

    @bottom-right {
    content: "Date " (TODAY()};

    and several other variations on the same syntax, to no avail.

  6. This comment has been removed by the author.

  7. ok so I am clearly missing something whenever I add this code to the page it just appears as text at the top before the apex page block

    1. @Robin,
      are you sure you are putting it inside page{}

    2. Could it be because I am using the account standard controller?

      If I add it to a style section then nothing happens at all.

    3. It should be inside the style and then inside @page {
      // Write code here

      observe it should be inside the @page.

  8. Hi all..
    Can any one help to render the visualforce chart on pdf?

    1. Why don't you post it on the boards? I am sure someone will help you out there

  9. If your stylesheet will not render add this setting to your apex:page applyhtmltag="false"


Post a Comment

Popular posts from this blog

Video: Top ten tips on how not to ruin Salesforce implementation

Another presentation for the London Salesforce Developer Group using mobile app. 
When it comes to Salesforce development, we all know what it takes to deliver stuff. Having a certified professional helps you gain a knowledgeable partner but what about the things such as common sense?  We all know how to deliver things on client requirements but what about things that are not mentioned by the client. We will be discussing in details things that will enhance the user experience, focus on tips to read your customers mind and have a bit of perspective on the user experience.

Cache me if you can: What you should know before daring to set URL parameter on visualforce

If someone gave me a pence for every time there was an SOQL query in an APEX Class without using Limit or a condition during a code review, I could afford a Lamborgini this month. Sigh. If only. We make it a habit of going digging for data, at the very moment we need it. The crux of this problem happens when you have chain classes which are independent of each other. Each class needs the reference from a single record and we have to query for that record every single time.

While we don't see it, every SOQL query has a cost to it, and it does not go in my Lamborghini fund, however, it should. In a recent project, we had to construct an Account 360 page that could fetch information from different integration points. The page was also called using a live telephony integration, which could pass the phone number for the account. This required an ability to keep in context the Account that was on call.

Passing the Account id in URL parameter was a valid option, however, any manipulatio…

Four secrets to improve the usability of your visualforce/Lightning pages on Salesforce

In the immortal words of a certain machine returning back in time, I am back. For now. After procrastinating for over a year and drafting a lot of rants- I am back with a very important coding lesson for you. For now.

When we are designing a Visualforce page or an app or a lightning component (added that only to trick google) or any web page for that matter, we often tend to wrap up things quickly. Ask anyone on the team, how to design a good User Experience? and the person will immediately throw buzz words like Bootstrap, angular and other useless libraries (did someone squint?)

Ok, Bootstrap, Angular-Js, and all the libraries are really cool and are useful in designing a fabulous UI. They are helpful in creating responsive pages that will work on all the devices but this post is not about those. Nope. For the purpose of this post, all the external libraries and buzzwords you use to decorate your resume are useless. (Adding Angular JS in your resume for a Salesforce consultant posit…