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