not able to use jsPDF autoTable plugin of jsPDF library

Question

Hi Have below import statements

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

loading both the scripts in renderedCallback

renderedCallback() {
    Promise.all([
        loadScript(this, JSPDF, JSPDF_AUTO_TABLE)
            .then(() => {
                console.log('loaded');
                this.jsPDFLoaded = true;
            }).catch(() => {
                console.log('not loaded');
            })
    ]);
}

no error from the above code. jsPDF is working as expected but when I try the below code to create an auto table.

const { jsPDF } = window.jspdf;
 const doc = new jsPDF({
            encryption: {
                userPermissions: ["print", "modify", "copy", "annot-forms", "download"]
            }
        });

doc.autoTable({
  styles: { fillColor: [255, 0, 0] },
  columnStyles: { 0: { halign: 'center', fillColor: [0, 255, 0] } }, // Cells in first column centered and green
  margin: { top: 10 },
  body: [
    ['Sweden', 'Japan', 'Canada'],
    ['Norway', 'China', 'USA'],
    ['Denmark', 'China', 'Mexico'],
  ],
})

it throws an error autoTable is not a function, could someone please suggest how to resolve this error?

JS-PDF library.

I am using this JS file for js-autoTable

UPDATE:

I have updated my renderedCallback as suggested in the answer below and it started working as expected but when I reload the page I am getting the same error now each time I click on edit to the static resource having jsPDFAutoTable and then reload the page it renders the autotable trust me I tried this 10 times before adding it here and this very strange not sure if this is a salesforce but or am I doing something wrong.

Answer 1

You need to call loadScript more than once, then wait for them to load:

Promise.all([loadScript(this, JSPDF), loadScript(this, JSPDF_AUTO_TABLE)])
.then(() => {
    console.log('loaded');
    this.jsPDFLoaded = true;
})
.catch(() => {
    console.log('not loaded');
});

Answer 2

I tried like below, and it worked fine for me

    jsPdfInitialized = false;

    renderedCallback(){
        console.log('renderedCallback start');
        if (this.jsPdfInitialized) {
            return;
        }
        this.jsPdfInitialized = true;
        
        loadScript(this, jsPDFScript)
        .then(() => {
            console.log('then');
            // load the autotable js file
            loadScript(this, jsPDFAutoTableScript);
        })
        .catch(error => {
            console.log('error');
            throw(error);
        });
    }

Here I have loaded the autotable script only if jsPDF is loaded successfully so as to avoid any conflict.

Note: try once in incognito also, just to be sure that no caching related problem is there.