Generate PDF using jsPDF in Lightning Web Component

PDF generation is very important for business and in many business scenarios like invoice generation, agreement generation etc, we have to generate PDFs. We can generate PDFs using server-side (by Salesforce Apex) and client-side ( using lightning component and visual force pages). This post will explain how we can generate PDF using jSPDF in Lightning Web Component.

There are many client-side tools available for PDF generation using Javascript like jsPDF, PDFKit, pdfmake, Puppeteer, pdf-lib, pdfme. Due to lightning locker service, most client-side libraries are blocked. We can use jsPDF library but a few functionalities like HTML to pdf generation will not work in Salesforce as dependent libraries are blocked by lightning locker.

Let us see the steps to use jsPDF in Salesforce LWC.

• Add jsPDF libraries in Static Resources
• Use jsPDF in the Lightning Web component
• Test Component

1. Add jsPDF libraries in Static Resources

Download jsPDF (jspdf.umd.min.js) from its Github repository. After downloading add that file into Salesforce Static resource as jsPDF. Make sure it is added as public.

2. Use jsPDF in the Lightning Web component

once jsPDF is added to a static resource, we can include that library in Lightning Web Component using loadscript of platformResourceLoader.

Three steps are required to generate PDFs using jsPDF.

• Create jsPDF instance
• Add text, table, images, diagrams, etc.
• Save the file as PDF

a. Create jsPDF instance

To use jsPDF we have to create an instance of this library using jsPDF class. It supports default constructors as well as parameter constructors.

//Default constructor
var doc = new jsPDF();
//Paramter constructor for portrait pdf 
const doc = new jsPDF('p', 'in', 'letter');
//using constructor with attribute
const doc =new jsPDF({   orientation: 'landscape',   unit: 'in',   format: [4, 2] }); 

b. Add text, table, images, diagrams, etc.

We can add text, tables, images, diagrams, and other elements to PDF documents.

//add text to PDF
doc.text(20, 20, 'Hello SalesforceCodex!');
doc.text(20, 30, 'jsPDF is client-side Javascript to generate a PDF.');

// Add new page
doc.addPage();
doc.text(20, 20, 'Visit SalesforceCodex.com');

//Sets the text color setTextColor(ch1, ch2, ch3, ch4) 
doc.setTextColor(100); 

There are a lot of other methods available for PDF generation. You can check those in the it’s documentation.

c. Save the file as a PDF

Once you put all code for document generation, you can call the save method to generate and save PDF files in the local system.

//Save File
doc.save("a4.pdf");

Complete Source Code

3. Test Component

Add the above-created component on the lightning page. It will show generate button as we are creating a PDF completely from Js code. We can use text from template control like a text box or rich text but we have to handle styles in the JS code itself. For this post I have used hardcoded text to put in PDF.

Here are two PDFs created using the above code.

References:

jsPDF

Similar Posts

Send Email Template As PDF Attachment using Salesforce Apex

Schedule Email alerts based on Business Hours