Visualforce Page Printable View


f02a62983ebcHow many times have you been asked to “can you make that a printable view, ya know, without the top and sidebar?” when you create a Visualforce Page?

If you have, you know the deal.  If not, oh don’t worry, you will before too much longer.

There is a quick and easy way to use the same VF page and APEX Controller that you already have built, using some Page variables, OutputPanels, some minor Javascript, and your “action” page attribute.

Step 1:  Create a Boolean variable and an “init” void method in your Controller

Something to the tune of:

public Boolean bolPrintableView {get;set;}

– and –

public void init() {
 String strPrintableView = ApexPages.currentPage().getParameters().get('print');
 bolPrintableView = (strPrintableView == '1');
}

Step 2:  Modify your VF Page attributes

<apex:page controller="YourPageController" showHeader="{!bolPrintableView}" sidebar="{!bolPrintableView}" action="{!init}">

Step 3:  Add a “Printable View” link to your VF Page

I will usually do this with an OutputPanel with the “rendered” attribute being set to the opposite of my controller’s printable view flag.  Doing this gets rid of the silly link for “Printable View” on your printed page along with any silly users clicking on the button again.

<apex:outputPanel rendered="{!NOT(bolPrintableView)}">
    <a href="/apex/YourVFPage?print=1" target="_blank">Printable View</a>
</apex:outputPanel>

Step 4:  Use a quick Javascript function to immediately call the print dialog on load

Again I’ll usually wrap this in another OutputPanel with the “rendered” attribute being set to what the printable view flag is – we don’t want this firing on the normal view of the page!

<apex:outputPanel rendered="{!bolPrintableView}">
 <script>
  window.print()
 </script>
</apex:outputPanel>

Optional Step 5:  Some pages just look better in Landscape mode – let’s use some CSS so it pops up like that by default.

<style type="text/css" media="print">
 @page { size: landscape; }
</style>

That’s it!  Works like a charm.  Questions?  Hit me below in the comments!

Advertisements

8 thoughts on “Visualforce Page Printable View

  1. Pingback: Force.com Design Patterns: Format Printable VisualForce Pages | Delivered Innovation Blog

  2. hi ,

    it is working fine but i want after performing couple operations , like filtering data ,

    the current code is return original landing, is there any way to see filtered data in printable view

    Thanks & Regards
    Siva.

    • Hello Siva!

      What you would need to do is to create a way to get your filtering criteria passed in via URL parameters and have your controller do that filtering before the PDF rendering.

      -Andy

    • You’ll pull that either as {!$CurrentPage.parameters.id} right in VF or using Apexpages.currentPage().getParameters().get(‘id’) to a variable in a controller.

  3. Hi Andrew
    I think people don’t need header and sidebar, when they print page.
    so showHeader=”{!not(bolPrintableView)}” sidebar=”{!not(bolPrintableView)} is suite for anyone.
    I think

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s