Render a Visualforce Page as PDF

Hi readers, Here we will see how can we render a Visualforce Page as PDF. The renderAs attribute is used for the same purpose.

Render a Visualforce Page as PDF:

To render a Visualforce Page as PDF we need to add renderAs=”pdf” attribute in <apex:page> component. Here is the Syntax:

Syntax:

<apex:page renderAs=”pdf”>

Example:

The example that I am going to create will display Account details Like Account Name, Account Number, Billing State, Billing City etc along with related Contact List, Opportunity List and Case List as PDF in the browser. Visualforce pages rendered as PDFs will either display in the browser or download as a PDF file, depending on your browser settings.

Now, Login to your Salesforce Account and Open Developer Console.

Create an Apex class:

Create a Class called AccountDetailsHandler.

public class AccountDetailHandler {
public string acctid;
public AccountDetailHandler(ApexPages.StandardController objAccountDetailHandler)
{
acctid=System.currentPageReference().getParameters().get('id');
}
public List<Contact> getContactList()
{
return [Select Name,Title,Email,Phone From Contact Where AccountId=:acctid];
}
public List<Opportunity> getOpportunityList()
{

return [Select Name,Amount,StageName,CloseDate From Opportunity Where AccountId=:acctid];
}
public List<Case> getCaseList()
{

return [Select CaseNumber,Contact.Name,Subject,Priority,Status,Owner.Name FROM Case Where AccountId=:acctid];
}
}

Create a Visualforce Page:

Create a Visualforce Page called PrintAccountDetails and write the following code.

<apex:page standardController="Account" extensions="AccountDetailHandler" showHeader="false" sidebar="false" renderAs="pdf" applyBodyTag="false">
<br/>
<br/>
<h1 style="font-size:24px;font-weight:bold;margin-left:10px;">
Account Details
</h1>
<br/>
<br/>
<table style="width:100%;padding:10px;">
<tr>
<td style="padding:10px;border: 1px solid #cbcbcb;font-weight:bold">
Account Name
</td>
<td style="padding:10px;border: 1px solid #cbcbcb;">
{!account.Name}
</td >
<td style="padding:10px;border: 1px solid #cbcbcb;font-weight:bold">
Account Number
</td>
<td style="padding:10px;border: 1px solid #cbcbcb;">
{!account.AccountNumber}
</td>
</tr>
<tr>
<td style="padding:10px;border: 1px solid #cbcbcb;font-weight:bold">
Type
</td>
<td style="padding:10px;border: 1px solid #cbcbcb;">
{!account.Type}
</td>
<td style="padding:10px;border: 1px solid #cbcbcb;font-weight:bold">
Phone
</td>
<td style="padding:10px;border: 1px solid #cbcbcb;">
{!account.Phone}
</td>
</tr>
<tr>
<td style="padding:10px;border: 1px solid #cbcbcb;font-weight:bold">
Billing State
</td>
<td style="padding:10px;border: 1px solid #cbcbcb;">
{!account.BillingState}
</td>
<td style="padding:10px;border: 1px solid #cbcbcb;font-weight:bold">
Billing City
</td>
<td style="padding:10px;border: 1px solid #cbcbcb;">
{!account.BillingCity}
</td>
</tr>
</table>
<apex:pageBlock rendered="True" title="Contacts" >
<apex:pageBlockTable width="100%" border="1px solid #cbcbcb;" value="{!ContactList}" var="objContact" cellpadding="10">
<apex:column value="{!objContact.Name}"/>
<apex:column value="{!objContact.Title}"/>
<apex:column value="{!objContact.Email}"/>
<apex:column value="{!objContact.Phone}"/>
</apex:pageBlockTable>
</apex:pageBlock>
<apex:pageBlock rendered="True" title="Opportunity" >
<apex:pageBlockTable width="100%" border="1px solid #cbcbcb;" cellpadding="10" value="{!OpportunityList}" var="objOpportunity">
<apex:column value="{!objOpportunity.Name}"/>
<apex:column value="{!objOpportunity.Amount}"/>
<apex:column value="{!objOpportunity.StageName}"/>
<apex:column value="{!objOpportunity.CloseDate}"/>
</apex:pageBlockTable>
</apex:pageBlock>
<apex:pageBlock rendered="True" title="Case" >
<apex:pageBlockTable width="100%" border="1px solid #cbcbcb;" cellpadding="10" value="{!CaseList}" var="objCase">
<apex:column value="{!objCase.CaseNumber}"/>
<apex:column value="{!objCase.Contact.Name}"/>
<apex:column value="{!objCase.Subject}"/>
<apex:column value="{!objCase.Priority}"/>
<apex:column value="{!objCase.Status}"/>
<apex:column value="{!objCase.Owner.Name}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>

Test Visualforce Page:


https://yoursalesforceinstance.com/apex/PrintAccountDetails?id=001i000000kFxeI

You need to replace yoursalesforceinstance with you Salesforce Instance and Id with your org Account ID.

Output:

Visualforce Page as pdf

View More:

Conclusion:

I hope this is a useful post for you. Please don’t hesitate to comment for any technical issues. Your feedback and suggestions are important to me.

Thank You.

Debug On Web

Render a Visualforce Page as PDF