Generate PDF using LWC from Quick Action

This post will walk you through the implementation to generate PDF using LWC from Quick Action. Generating PDF in Salesforce using Lightning Web Components or Aura components is a very common use case. Although we can generate PDF using LWC as well as the Aura component, we need to make use of the intermediate Visualforce page.

This Visualforce page will be used to show and format the content of the PDF. LWC will be used to create a headless quick action that will generate a PDF using the Visualforce page. Let’s get into the implementation.

Generate PDF using LWC

In this implementation, we will show Create PDF button on the Account details page. After clicking a button, a PDF will be generated, a page will refresh and the PDF will be attached in the Files section of Account.

We first need to create a Visualforce page that will have the PDF Content. Below is the simple Visualforce page that will display Account details with the help of the Account Standard Controller.

pdfTemplate.page

<apex:page renderAs="pdf" standardController="Account">

    <h1>Account Details</h1>

    Dear {!account.Name}, <br/><br/>
    Below are the Account details: <br/>
    Type: {!account.Type} <br/>
    Account Number: {!account.AccountNumber}

</apex:page>

Then, create an Apex Class which will create an instance of this Visualforce page. We have to use this instance to get the body content of pdf and store it in the Blob variable. Then, we need to add the Id parameter to the Page Reference so that it will reflect the details of the specific Account record.

Account objAccount = [SELECT Name FROM Account WHERE Id = :idAccount LIMIT 1];
PageReference objPagePdf = Page.PdfTemplate;
objPagePdf.getParameters().put('Id', idAccount);
strPdfBody =  objPagePdf.getContent();

The idAccount is the Id of Account which will be passed from the Quick Action after clicking the button.

Then, use the ContentVersion object and pass above Blob variable strPdfBody to VersionData. We need to provide other necessary details like Title, PathOnClient and ContentLocation.

ContentVersion objVersion = new ContentVersion();
objVersion.ContentLocation = 'S';
objVersion.PathOnClient = 'Test ' +objAccount.Name +'.pdf';
objVersion.Title = 'Test ' +objAccount.Name;
objVersion.VersionData = strPdfBody;
insert objVersion;

Also Read:

Finally, we need to create the ContentDocumentLink record to link the ContentVersion with the Account record.

Id objDocId = [SELECT ContentDocumentId FROM ContentVersion WHERE Id =:objVersion.Id].ContentDocumentId;
ContentDocumentLink objDocumentLink = New ContentDocumentLink();
objDocumentLink.LinkedEntityId = objAccount.Id;
objDocumentLink.ContentDocumentId = objDocId;
objDocumentLink.shareType = 'V';
insert objDocumentLink;

We can also insert the PDF file as an Attachment but in this implementation, we are adding it as a File, which is more popular nowadays with Lightning.

This is how our apex class would look:

public with sharing class CreatePdfController {
    
    @AuraEnabled
    public static Id generatePdf(String idAccount){
        Blob strPdfBody = null;
        Attachment objAttach = new Attachment();
        try {
            Account objAccount = [SELECT Name FROM Account WHERE Id = :idAccount LIMIT 1];
            PageReference objPagePdf = Page.PdfTemplate;
            objPagePdf.getParameters().put('Id', idAccount);
            strPdfBody =  objPagePdf.getContent();

            ContentVersion objVersion = new ContentVersion();
            objVersion.ContentLocation = 'S';
            objVersion.PathOnClient = 'Test ' +objAccount.Name +'.pdf';
            objVersion.Title = 'Test ' +objAccount.Name;
            objVersion.VersionData = strPdfBody;
            insert objVersion;

            Id objDocId = [SELECT ContentDocumentId FROM ContentVersion WHERE Id =:objVersion.Id].ContentDocumentId;
            ContentDocumentLink objDocumentLink = New ContentDocumentLink();
            objDocumentLink.LinkedEntityId = objAccount.Id;
            objDocumentLink.ContentDocumentId = objDocId;
            objDocumentLink.shareType = 'V';
            insert objDocumentLink;
            return objDocumentLink.Id;
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }
}

Headless Quick Action with LWC

Now, we just need to create a headless Quick Action using LWC. Check this implementation to know how we can create Quick Action using LWC. Headless actions run without opening the quick action pop-up window which is perfect in our scenario as we don’t want to display anything on the screen.

Create a Lightning Web Component and keep the HTML file blank with only the default template tag.

In the metafile, add the lightning__RecordAction target and targetConfig for Quick Action.

createPdf.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
            <actionType>Action</actionType>
        </targetConfig>
     </targetConfigs>
</LightningComponentBundle>

The actionType as Action makes it a headless quick action.

Finally, in the Javascript file, use the @api decorator and invoke() method which will be executed as soon as we click the Quick Action button. In this method, we will call the Apex class method and pass the Account Id of the current record. Apex method will create the PDF and attach it to file section. If the record is created successfully, the Account page will refresh and will show the PDF in the Files Related List.

Below is the snapshot of generated PDF in the Files Related List.

Generate PDF using LWC from Quick Action
Generate PDF using LWC from Quick Action

This is how we can Generate PDF using LWC from Quick Action. If you don’t want to miss new implementations, please Subscribe here. Feel free to check more Lightning Web Component Implementations.

If you want to know more about Headless Quick Action, check official Salesforce documentation here.

See you in the next implementation, thank you.

Leave a Comment