Display PDF Files With Lightning Web Component in Salesforce

Have you ever wanted to display a PDF file within your Salesforce Lightning pages? Maybe it’s an invoice, contract, or even a report. To view the PDF on the Lightning Record or App page, we can use Lightning Web Components.

In this Salesforce tutorial, we will learn how to display PDF files with Lightning Web Components in Salesforce, through which we can view the PDF file on Lightning pages.

Create a Lightning Web Component to View PDF on Lightning Page

In the steps below, we will create a Lightning Web Component that will display the details of the invoice on the account record page.

To achieve the functionality of displaying PDFs on the Account record page, we will cover the following points.

• Creating the Visualforce page that displays a PDF
• Creating the Lightning Web Component
• Creating the LWC quick action to call the component and display the PDF

If the PDF is displayed directly on the lightning record page, it will take up a large space. To avoid this, we will create a LWC quick action that will display the PDF on the Account record page.

Creating the Visualforce Page That Displays a PDF

To fetch the PDF, I have used a Visualforce page that generates a PDF for the current record. If you haven’t created a Visualforce page, follow the steps below to create one.

1. On the setup of Salesforce Lightning, go to Quick Find and then search and select Visualforce pages.
2. In the visualforce setup, click on the New window. Then, in the next window, enter the label for the visualforce page and select the checkbox Available for Lightning Experience.

3. In the VisualForce Markup tab, enter the code below in the code editor.

<apex:page standardController="Account" renderAs="advanced_pdf">
    <h1 style="text-align:center;">Invoice</h1>
    <hr/>
    <p><strong>Account Name:</strong> {!Account.Name}</p>
    <p><strong>Account Number:</strong> {!Account.AccountNumber}</p>
    <p><strong>Billing Address:</strong> {!Account.BillingStreet}, {!Account.BillingCity}, {!Account.BillingState}, {!Account.BillingCountry}</p>
    <br/>
    <h3>Invoice Details</h3>
    <table border="1" cellpadding="5" width="100%">
        <tr>
            <th>Item</th>
            <th>Amount</th>
        </tr>
    <p><em>Thank you </em></p>
</apex:page>

In this visualforce page, the expression renderAs=”advanced_pdf” will display the page details in PDF format.

This Visualforce PDF will generate an invoice PDF for the current account record using the record ID.

After this, save the visualforce page and also copy the source URL path of the Visualforce page that will be required in the LWC to refer to the visualforce page and display the PDF.

Now, we will move to the next part, where we will create the Lightning Web Component, through which we can view the PDF on the Lightning page.

Create the Lightning Web Component

To create the Lightning Web Component, open VS Code IDE integrated with the Salesforce org. and follow the steps below.

1. In VS Code, press the keys Ctrl+Shift+P, then in the command palette select the option SFDX: Create a lightning web component.
2. Enter the name for the component in camel case, such as viewPdf, and after this, you will get three files in the LWC folder: .html, .js, and meta.xml.
3. Enter the below code in the JS file to define the logic of displaying the PDF on the current Account record.

import { LightningElement,api} from 'lwc';
import { CloseActionScreenEvent } from 'lightning/actions';

export default class ViewPDF extends LightningElement {
    @api recordId;
    
    get vfUrl() {
        return '/apex/InvoicePDF?id=${this.recordId}';
    }

    closeQuickActionDialog() {
        this.dispatchEvent(new CloseActionScreenEvent());
    }
}

In the above code, we have imported the CloseActionScreenEvent so that we can further use this lightning web component in the quick action that will display the PDF document.

We have used the @api decorator to access the record ID of the current record and display the details in the invoice PDF.

The closeQuickActionDialog will close the quick action, displaying the PDF.

Now, in the UI of the lightning web component, we will define the height and width of the PDF viewer.

<template>
    <lightning-quick-action-panel header="PDF View">
        <iframe src={vfUrl} width="100%"></iframe>
        <div slot="footer">
            <lightning-button variant="brand" label="Close" onclick={closeQuickActionDialog}></lightning-button>
        </div>
    </lightning-quick-action-panel>
</template>

To embed the visualforce in the Lightning web component, we have used the <iframe> tag and inside that we have to define the source, so for that we have used src={vfUrl}, and we have already defined visualforce page source URL in the JS, so we we are referring it over here.

Now, to make the component visible to the Lightning pages, we need to set the targets for the Lightning web component in the meta.xml file.

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

To make this component available for the lightning pages as a quick action, we have defined targets as lightning__RecordAction and lightning__RecordPage.

We have also used the object target as Account to make this LWC restricted for the Account object <objects> tag in the targets.

With this, the lightning component is created, and now we need to deploy the changes to the Salesforce org. For that, right-click on the ViewPDF lwc folder and select SFDX: Deploy this source to the org.

Create the LWC Quick Action to View the PDF

Using the above Lightning web component, we will create a Lightning web component. In this example, we are making the PDF accessible directly from the record page.

If we display it directly on the record page layout, then it will occupy more space, and the user needs to scroll to view other details on the record page. So, we will display the PDF using the LWC quick action.

Follow the steps below to create a LWC quick action that will display the PDF on button click.

1. Navigate to Object Manager > Account, then select Buttons, Links, and Actions.
2. Click the New button to create a quick action.
3. Select the Action type as Lightning Web Component. In the Lighting Web Component field, select the component that we have created in the above steps (viewPdf).

After this, enter the label for the LWC quick action and click the Save button.

With this, we have created an LWC quick action that displays the PDF when the action is triggered by a button click on the account record page.

To make it visible to the users, we need to add this quick action to the page layout. For that, navigate to Object Manager> Account > Page layouts.

In the page layouts, click on the Mobile and Lightning Actions, then drag the LWC quick action View Invoice to the section Salesforce Mobile and Lightning Experience Actions, and save the changes.

Now, to navigate to the Account record page, you will see the quick action button ‘View Invoice.’ As we click on the button, it will display the invoice details PDF for the current record.

This is how we can create a Lightning Web Component in Salesforce through which we can view PDF files on the current record page.

You may also like to read:

• Create Image Cropper in Salesforce Lightning Web Component
• Custom Image Slider in Salesforce Using Lightning Web Component
• Create a Custom Calendar Using Lightning Web Components in Salesforce
• Override Standard Button Using Lightning Web Component (LWC)

Bijay Kumar

I am Bijay Kumar, the founder of SalesforceFAQs.com. Having over 10 years of experience working in salesforce technologies for clients across the world (Canada, Australia, United States, United Kingdom, New Zealand, etc.). I am a certified salesforce administrator and expert with experience in developing salesforce applications and projects. My goal is to make it easy for people to learn and use salesforce technologies by providing simple and easy-to-understand solutions. Check out the complete profile on About us.