Hey guys, today in this post we are going to learn about How to generate/view PDF using Lightning Components and send to “Notes & Attachments” using Apex Bolb to generate pdf in Salesforce.
There are two methods to show a PDF in Lightning Component. First, you can create a Visualforce page and embed it in the Lightning component. Second is, usage of PDF. JS library to directly use lightning component to display the PDF. To know more about generate pdf from aura component, Click Here.
Files we used to generate pdf in Lightning Component →
SalesAccountOrderFormPDF.cmp | Lightning Component | It is used to display spinner loading on the page. |
SalesAccountOrderFormPDFController.js | JavaScript Controller | It is hold Javascript doInit function to connect javascript controller to helper function. |
SalesAccountOrderFormPDFHelper.js | JavaScript Controller Helper | It is hold Javascript SendOrderPdfHelper function to generate the pdf file from lightning component. |
SendOrderPdfCtrl.apxc | Apex Class Controller | It is used for generate pdf using Bolb Apex in lightning component. |
SalesAccountOrderFormPDFVfp.vfp | Visualforce Page | It is render as pdf from visualforce page. |
SalesAccountOrderForm_Controller.apxc | Apex Class Controller | It is used for get get the current record of Account. |
Final Output →
You can download file directly from github by Click Here.
Other related post that would you like to learn in Salesforce
- Find the below steps ▾
Create Lightning Component
Step 1:- Create Lightning Component : SalesAccountOrderFormPDF.cmp
From Developer Console >> File >> New >> Lightning Component
SalesAccountOrderFormPDF.cmp [Lightning Component File]
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickActionWithoutHeader" access="global"
controller='SendOrderPdfCtrl' >
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name='recordId' type='Id'/>
<lightning:spinner class="slds-hide" aura:id="spinner" size="large" variant="brand" alternativeText="spinner" />
</aura:component>
Create JavaScript Controller
Step 2:- Create Lightning Component : SalesAccountOrderFormPDFController.js
From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller
SalesAccountOrderFormPDFController.js [JavaScript Controller]
({
doInit : function(component, event, helper) {
helper.SendOrderPdfHelper(component,event,helper);
},
})
Create JavaScript Helper
Step 3:- Create Lightning Component : SalesAccountOrderFormPDFHelper.js
From Developer Console >> File >> New >> Lightning Component >> JavaScript Helper
SalesAccountOrderFormPDFHelper.js [JavaScript Helper File]
({
SendOrderPdfHelper : function(component,event,helper) {
var recId = component.get('v.recordId');
// alert('recId ' + recId);
var action = component.get("c.attachedOrderFile");
action.setParams({ "orderId" : recId });
action.setCallback(this, function(response) {
var state = response.getState(); //fetch the response state
//alert('state11 ' + state);
if (state === "SUCCESS") {
var result = response.getReturnValue();
//alert('result ' + JSON.stringify(result));
$A.get("e.force:closeQuickAction").fire();
$A.get('e.force:refreshView').fire();
if(result == "Attachment Created Success"){
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
title : 'Success',
type: 'success',
message: 'Attachment Creatted Succussfully',
});
toastEvent.fire();
}
}
else {
}
});
$A.enqueueAction(action);
}
})
Create Apex Class Controller
Step 4:- Create Apex Class : SendOrderPdfCtrl.apxc
From Developer Console >> File >> New >> Apex Class
SendOrderPdfCtrl.apxc [Apex Class Controller]
public class SendOrderPdfCtrl {
@AuraEnabled
public static String attachedOrderFile(String orderId){
Account orderItemList = [SELECT Id, Name, Phone, Industry, Rating, Description, TYPE, Website FROM Account WHERE Id=:orderId ];
IF((orderItemList.Industry=='Technology') && (orderItemList.Type=='Technology Partner')){
PageReference PDf = Page.SalesAccountOrderFormPDFVfp;//REPLACE attachmentPDf WITH the page you have rendered AS PDF
PDf.getParameters().put('Id', orderId);
PDf.setRedirect(TRUE);
Attachment attach = NEW Attachment();
BLOB b ;
b = PDf.getContent();
attach.Body = b;
attach.Name = orderItemList.Name +'.pdf';
attach.IsPrivate = FALSE;
attach.ParentId = orderId;
INSERT attach;
system.debug('attach### ' + attach);
system.debug('orderItemList### ' + orderItemList);
RETURN 'Attachment Created Success';
}ELSE{
RETURN 'Attachment Created Failed';
}
}
}
Create Visualforce Page
Step 5:- Create Visualforce Page :
SalesAccountOrderFormPDFVfp.vfp
From Developer Console >> File >> New >> Visualforce Page
SalesAccountOrderFormPDFVfp.vfp [Visualforce Page]
<apex:page applyHtmlTag="false" showHeader="false" standardController="Account" extensions="SalesAccountOrderForm_Controller" renderAs="pdf" standardStylesheets="false"
applyBodyTag="false">
<head>
<style>
@page {
size: A4 portrait;
margin: 3mm;
}
body {
font-family: sans-serif;
font-size: 11pt;
}
th {
min-height: 15px;
max-height: auto;
background:#ddd;
}
td {
min-height: 15px;
max-height: auto;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10" style="width: 100%; border-collapse: collapse; border-color: #000; text-align:left;">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Industry</th>
<th>Rating</th>
<th>Description</th>
<th>Website</th>
</tr>
</thead>
<apex:repeat value="{!accObj}" var="accItem">
<tr width="100%" style="text-align: center;">
<td style="text-align:left;"><apex:outputText value="{!accItem.Name}"/></td>
<td style="text-align:left;"><apex:outputText value="{!accItem.Phone}"/></td>
<td style="text-align:left;"><apex:outputText value="{!accItem.Industry}"/></td>
<td style="text-align:left;"><apex:outputText value="{!accItem.Rating}"/></td>
<td style="text-align:left;"><apex:outputText value="{!accItem.Description}"/></td>
<td style="text-align:left;"><apex:outputText value="{!accItem.Website}"/></td>
</tr>
<apex:repeat value="{!accItem.Contacts}" var="con">
<tr width="100%" style="text-align: center;">
<td style="text-align:left;"><apex:outputText value="{!con.Name}"/></td>
<td style="text-align:left;"><apex:outputText value="{!con.FirstName}"/></td>
<td style="text-align:left;"><apex:outputText value="{!con.LastName}"/></td>
<td style="text-align:left;"><apex:outputText value="{!con.Email}"/></td>
<td style="text-align:left;"><apex:outputText value="{!con.Phone}"/></td>
<td style="text-align:left;"><apex:outputText value="{!con.Title}"/></td>
</tr>
</apex:repeat>
</apex:repeat>
</table>
</body>
</apex:page>
Create Apex Class Controller
Step 6:- Create Apex Class : SalesAccountOrderForm_Controller.apxc
From Developer Console >> File >> New >> Apex Class
SalesAccountOrderForm_Controller.apxc [Apex Class Controller]
public class SalesAccountOrderForm_Controller {
public String MstrId{GET;SET;}
public Account accObj{GET;SET;}
public SalesAccountOrderForm_Controller(ApexPages.StandardController Controller){
MstrId = ApexPages.currentPage().getParameters().get('id');
accObj = [SELECT Id, Name, Phone, Industry, Rating, Description, Website, TYPE, (SELECT Id, Name, FirstName, LastName, Email, AccountId, Phone, Title FROM Contacts) FROM Account WHERE Id =: MstrId ];
}
}
Further post that would you like to learn in Salesforce
How do I render a VF page as a PDF?
We can render any page as pdf by adding renderAs attribute to and specifying “pdf” as value. renderAs value is name of any supported content converter. Currently PDF is the only supported content converter.
Can we generate PDF in aura?
You cannt generated PDF by using lightning component direcly .. use need to use the visualforce page and call its from the lightning exp. There are two methods to show a PDF in Lightning Component. First, you can create a Visualforce page and embed it in the Lightning component.
Can we render aura component as PDF?
Displaying the aura component in a separate tab then letting the user just download the page contents using regular browser functionality. Displaying the aura component in separate tab then using an external library to take screenshot of the page, then exporting as downloadable PDF.
Related Topics | You May Also Like
Our Free Courses →
👉 Get Free Course →
📌 Salesforce Administrators 📌 Salesforce Lightning Flow Builder 📌 Salesforce Record Trigger Flow Builder |
👉 Get Free Course →
📌 Aura Lightning Framework 📌 Lightning Web Component (LWC) 📌 Rest APIs Integration |