How to Generate PDF Using jsPDF In Lightning Web Component?

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.

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.