How to Generate PDF Using jsPDF In Lightning Web Component? : Abhijeet

April 03, 2025 April 03, 2025

How to Generate PDF Using jsPDF In Lightning Web Component?
by: Abhijeet
blow post content copied from SalesForce FAQs
click here to view original post

### Summary In this tutorial, we learn how to generate PDF documents from Salesforce records using the jsPDF library within a Lightning Web Component (LWC). This process is particularly useful for sharing important information such as product details, account information, or invoices in a portable document format. ### Key Steps to Generate PDF 1. **Download jsPDF Library**: - Obtain the jsPDF library from the provided URL and save it as `jsPDFLibrary.js`. - Upload this file as a static resource in Salesforce with public cache control. 2. **Create LWC Component**: - Develop a simple LWC component with a button labeled "Generate PDF". - Use the JavaScript file to import the jsPDF library and define the logic for generating and saving the PDF. 3. **PDF Generation Logic**: - In the JavaScript file, use the `loadScript` function to load the jsPDF library dynamically. - Create a new jsPDF instance and define the content of the PDF using methods like `text()` to add information and `save()` to save the document. 4. **Deploying the Component**: - Make the component accessible on Lightning pages (e.g., App Page, Record Page, Home Page). - Add the component to the desired record page, allowing users to generate PDFs directly from the record view. 5. **Real-Time Example**: - Extend the component to pull data from an Opportunity record and include relevant fields in the generated PDF such as Opportunity Name, Stage, Amount, Close Date, Account Name, and Owner Name. ### Conclusion The tutorial demonstrates how flexible and powerful Lightning Web Components can be for generating PDFs directly from Salesforce data using an external library like jsPDF. This capability enhances the functionality of Salesforce by allowing easy sharing of information in a professional format. ### Additional Context Using jsPDF not only simplifies the PDF generation process, but it also helps developers customize the content and layout of the PDFs according to their business needs. The approach shown can be adapted for various types of records across Salesforce. ### Relevant Hashtags for SEO #Salesforce #LWC #jsPDF #PDFGeneration #SalesforceTutorial #LightningWebComponents #WebDevelopment #SalesforceDevelopment #APIDevelopment #UserExperience

In Salesforce, generating a PDF of a record is useful when we have to send the record information that can be a product, account, or invoice. With PDFs, we can download them externally and share them with others.

In this Salesforce tutorial, we will learn how to generate a PDF using jsPDF in Lightning Web Component.

Generate PDF Using Lightning Web Component

To generate PDF using the Salesforce Lightning Web Component, we will use the javascript library jsPDF, which is an open-source library for generating PDF documents using Javascript only.

Download the jsPDF Library

To get the functionality of the jsPDF library, we need to install it by following the steps below.

1. To download the jsPDF library, open the below link in a new tab.

"https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js

2. After this, right-click on the web page and select Save as, then save the file as jsPDFLibrary.js at the location from where it can be accessible to Salesforce org.

3. In the Salesforce org, go to the quick find box and then navigate to Static Resources.

Name the static resource file as jsPDFLibrary and upload the jspdf file that we have downloaded in the File.

Ensure that you have kept the Cache Control as Public. At last, click Save.

Generate PDF using Lightning Web Component

Now, we have created a static URL resource from where we can access the jsPDF library to import the functionality of PDF generation.

Create the LWC Component

In the example below, I will create a sample LWC component displaying a text, and we will generate a PDF file for that text message.

1. Create an LWC component generatePDF and enter the below code in the HTML file to define the UI of the LWC component.

<template>
    <lightning-button label = "Generate PDF" onclick={generatePDF}></lightning-button>
</template>

With this, we have added a button in the component that will trigger the event generatePDF and download the content in PDF format.

2. After this, enter the code below in the js file in which we have imported the jsPDF library and defined the logic to generate and save the PDF file in the system.

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import jsPDFLibrary from '@salesforce/resourceUrl/jsPDFLibrary';

export default class GeneratePDFCmp extends LightningElement {
    jsPDFInitialized = false;
    renderedCallback() {
        if (!this.jsPDFInitialized) {
            this.jsPDFInitialized = true;
            loadScript(this, JS_PDF)
                .then(() => {
                    console.log('jsPDF library loaded successfully');
                })
                .catch((error) => {
                    console.error('Error loading jsPDF library', error);
                });
        }
    }

    generatePDF() {
        if (this.jsPDFInitialized) {
            const doc = new window.jspdf.jsPDF();
            doc.text('This is LWC generated PDF!', 10, 10);
            doc.save('LWC.pdf');
        } else {
            console.error('jsPDF library not initialised');
        }
    }
}

3. Make the component visible to the lightning pages using the code below.

<isExposed>true</isExposed>
        <targets>
                <target>lightning__AppPage</target>
                <target>lightning__RecordPage</target>
                <target>lightning__HomePage</target>
        </targets>

4. Navigate to the Lightning page and deploy the LWC component. This LWC component only contains a Button in the UI that will trigger the PDF generation.

As we click on the button, it will generate the pdf file LWC.pdf, the file name we defined in doc.save.

On opening the pdf file, it will display the sample text that we have entered in the doc.text.

Create a PDF file from a Salesforce LWC component

This way, we can generate a PDF file in Salesforce Lightning Web Component using the jsPDF library.

Let’s discuss some standard jsPDF methods that we can use in the LWC to generate and modify PDFs.

1. text(text, x, y, options): Adds text to the PDF at the specified coordinates (x, y).

text: The string of text to add.
x: The x-coordinate for the starting position of the text.
y: The y-coordinate for the starting position of the text.
options (optional): An object containing additional settings such as alignment, font size, and font type.

2. save(filename): It saves the generated PDF file with the given file name.

3. addPage([orientation], [format]): Adds a new page to the PDF document. We can specify the page orientation and format.

4. setFontSize(size): It sets the font size for the text in PDF. For example, doc.setFontSize(18).

5. setFont(fontType, fontStyle): Sets the font style and its type, like ‘helvetica’ as style and ‘bold’ as type.

Generate Opportunity Information PDF using LWC

Now, we will take a real-time example and generate a PDF with opportunity information. This LWC component will be deployed on the opportunity record page, and from there, it will take the current record ID and generate a PDF for the current opportunity record.

In this LWC component, we will use the jsPDF library that we have saved as a static URL resource.

1. Create an LWC component and enter the below to define the UI of the LWC component. The UI will only contain a button that will trigger the PDF generation.

<template>
    <lightning-button label = "Generate PDF" onclick={generatePDF}></lightning-button>
</template>

2. Enter the below code in the JS file.

import { LightningElement, wire, api } from 'lwc';
import jsPDFLibrary from '@salesforce/resourceUrl/jsPDFLibrary';
import { loadScript } from 'lightning/platformResourceLoader';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

import NAME_FIELD from '@salesforce/schema/Opportunity.Name';
import STAGE_FIELD from '@salesforce/schema/Opportunity.StageName';
import AMOUNT_FIELD from '@salesforce/schema/Opportunity.Amount';
import CLOSE_DATE_FIELD from '@salesforce/schema/Opportunity.CloseDate';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Opportunity.Account.Name';
import OWNER_NAME_FIELD from '@salesforce/schema/Opportunity.Owner.Name';

const fields = [NAME_FIELD, STAGE_FIELD, AMOUNT_FIELD, CLOSE_DATE_FIELD, ACCOUNT_NAME_FIELD, OWNER_NAME_FIELD];

export default class GenerateOpportunityPDF extends LightningElement {
    jsPDFInitialized = false;
    
    @api recordId;
    opportunityName;
    stage;
    amount;
    closeDate;
    accountName;
    ownerName;

    @wire(getRecord, { recordId: '$recordId', fields })
    opportunityData({ data, error }) {
        if (data) {
            console.log('Opportunity Data: ' + JSON.stringify(data));
            this.opportunityName = getFieldValue(data, NAME_FIELD) || 'N/A';
            this.stage = getFieldValue(data, STAGE_FIELD) || 'N/A';
            this.amount = getFieldValue(data, AMOUNT_FIELD) || '0';
            this.closeDate = getFieldValue(data, CLOSE_DATE_FIELD) || 'N/A';
            this.accountName = getFieldValue(data, ACCOUNT_NAME_FIELD) || 'N/A';
            this.ownerName = getFieldValue(data, OWNER_NAME_FIELD) || 'N/A';
        } else if (error) {
            console.error('Error fetching Opportunity record: ', JSON.stringify(error));
        }
    }

    renderedCallback() {
        if (!this.jsPDFInitialized) {
            this.jsPDFInitialized = true;
            loadScript(this, jsPDFLibrary)
                .then(() => {
                    console.log('jsPDF library loaded successfully');
                })
                .catch((error) => {
                    console.error('Error loading jsPDF library: ', error);
                });
        }
    }

    generatePDF() {
        if (this.jsPDFInitialized && window.jspdf) {
            try {
                const { jsPDF } = window.jspdf;
                const doc = new jsPDF();

                doc.setFontSize(16);
                doc.setFont('helvetica', 'bold');
                doc.text('Opportunity Information', 60, 20);
                doc.setLineWidth(0.5);
                doc.line(50, 24, 160, 24);

                doc.setFontSize(12);
                doc.setFont('helvetica', 'normal');
                doc.text('Opportunity Name:', 30, 50);
                doc.text('Stage:', 30, 60);
                doc.text('Amount:', 30, 70);
                doc.text('Close Date:', 30, 80);
                doc.text('Account Name:', 30, 90);
                doc.text('Owner Name:', 30, 100);
                
                doc.text(this.opportunityName, 80, 50);
                doc.text(this.stage, 80, 60);
                doc.text(this.amount.toString(), 80, 70);
                doc.text(this.closeDate, 80, 80);
                doc.text(this.accountName, 80, 90);
                doc.text(this.ownerName, 80, 100);

                doc.save('OpportunityInformation.pdf');
            } catch (error) {
                console.error('Error generating PDF: ', error);
            }
        } else {
            console.error('jsPDF library is not loaded or initialized');
        }
    }
}

In the above js file, we have first imported the core functionalities jsPDFLibrary, the PDF generation library (stored as a static resource). loadScript to load the jsPDF library dynamically, and “getRecord, getFieldValue” to fetch record data from Salesforce.

Generate Pdf for opportunity record in Salesforce

In this section, we have specified the fields that we want to retrieve from the Opportunity record. These fields include Opportunity Name, Stage, Amount, Close Date, Account Name, and Owner Name.

To fetch the opportunity data, we have used the @wire method. It will fetch the record data whenever the component loads. For the PDF details, we have extracted values from the record using getFieldValue(data, FIELD_NAME). If a field is empty, it will return the default value ‘N/A’.

Since Salesforce doesn’t allow the direct use of external libraries, we load jsPDF dynamically inside renderedCallback() event. This ensures that the library is available before we attempt to generate the PDF.

After this, the generatePDF() method checks if the jsPDF library is loaded. Then, it creates a new jsPDF instance. Next, it adds formatted text, including headers, labels, and values, to the document. Finally, the file is saved as OpportunityInformation.pdf, containing all the essential details of the Opportunity record.

3. Make the component visible to the Lightning pages using the code below in the meta.xml file.

This LWC component will generate a PDF for the opportunity, so we will deploy it on the Opportunity record page; for that, we will expose this component to the lightning_RecordPage.

 <isExposed>true</isExposed>
        <targets>
                <target>lightning__HomePage</target>
        </targets>

4. Navigate to the opportunity tab and open any opportunity record. On the record page, click on the settings icon and select the Edit page.

5. In the lightning app builder, add the LWC component to the record page and save the changes.

The LWC component will be displayed as a “Generate PDF” button on the lightning record page.

How to generate object record pdf using LWC

As we click on the button, it will trigger the generatePDF() method and the PDF file will be generated and downloaded in your system.

From the downloads folder, we can view the generated opportunity record information PDF.

Generate Record Information PDF using LWC

This way, we can generate a pdf with the Salesforce lightning web component using the jsPDF library.

Conclusion

In this Salesforce tutorial, we have learned how to generate a PDF file with Lightning Web Components. In the above example, we have generated a PDF file for the Opportunity record information by using the jsPDF library. We stored the jsPDF library as a static resource and then imported its core functionalities, like loadScript in the LWC component.

By following the above steps, we can define the fields and parameters of the object and generate a PDF file to get the record information.

Salesforce Reader