Issues using jsPDF library in an LWC

Question

recently in our org we have needed the ability to create PDF files. I am aware you can do this using visualforce pages with the render as PDF method, however we would like the pdf to be styled more professionally and unfortunately visualforce is quite limited due to using an outdated renderer (only supports CSS2.1).

Due to this I decided to import the jsPDF library. However i'm having issues when trying to use this in my component. I'll list below what I have done.

I have downloaded the version 2.5.1 'jspdf.umd.min.js' file and uploaded that to salesforce as a static resource name 'jspdf'.

In the lwc I have imported the jspdf at the top of my component along with the platform resource loader

import JSPDF from '@salesforce/resourceUrl/jspdf';
import { loadScript } from 'lightning/platformResourceLoader';

I have added a renderCallback method to load in the jspdf script

    renderedCallback() {
    if (this.jsPdfInitialized) {
        return;
    }
    this.jsPdfInitialized = true;
    loadScript(this, JSPDF)
        .then(() => {
            console.log("jsPDF script loaded successfully.");
            // Check if jsPDF is available on the window object
            if (window.jspdf && window.jspdf.jsPDF) {
                console.log("jsPDF library is available.");
            } else {
                console.error("jsPDF library not available after script load.");
            }
        })
        .catch(error => {
            console.error("Failed to load jsPDF script: ", error);
        });
}

This is where my error occurs as the 'window.jspfd' is always undefined.

I have seen other threads here: jsPDF Importing but not working in LWC jsPDF is not working in LWC

But nothing I do seems to work. Can anyone perhaps point me in the right direction, any help will be greatly appreciated.

UPDATE: To try and debug further I tried loading another external library that we have in our org that I know already works. This library also wouldn't show in the 'window'. I assume this is due to my component extending 'LightningModal' instead of 'LightningElement'. I will update further when I have found a solution.

Answer 1

It should work when you use

Promise.all([
            loadScript(this, jsPDF+'/jspdf.umd.min.js').then(() => {
                console.log("JS loaded");
            }).catch(error => {
                console.error("Error " + error);
            })
        ]);

two changes:-

first correcting the path of the js file while loading the script and second using promise.all

Checking a working example in this blog: https://salesforcecodex.com/salesforce/generate-pdf-using-jspdf-in-lightning-web-component/

Answer 2

For anyone else struggling with this, I have discovered the reason jsPDF wasn't importing.

I was originally trying to import the library into a 'LightningModal' component. I am unaware if this is not supported as I haven't found anything on this matter regarding importing an external library into a LightningModal, but it seems by loading my script in the parent 'LightningElement' then it will load perfectly with my original code.

If anyone has anymore information about this I'd love to hear about it or if you could supply a link to the resource that talks about this.