LWC jsPDF-autoTable plugin not working as expected

Question

I am importing both the cdn static resources for jsPDF and the jsPDF-autoTable plugin. Here is how I am loading it in:

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import JSPDF from '@salesforce/resourceUrl/jspdf'
import JSPDF_PLUGIN from '@salesforce/resourceUrl/jspdfplugin'
import LOGO from '@salesforce/resourceUrl/logos';

export default class InvoiceLineItems extends LightningElement {

    logo = LOGO + '/logo1.png'
    loadedJSPDF = false;
  

    renderedCallback(){
        if(!this.loadedJSPDF){
            Promise.all([loadScript(this,JSPDF),loadScript(this,JSPDF_PLUGIN)])
            .then((result) => {               
                this.loadedJSPDF = true;
                this.generatePDF(); 
            })
        }
    }

This is loading fine as i do not seem to get any errors. However when I try and use the autoTable it gives me an error

t.autoTable is not a function

This is code works so the jsPDF is working fine.

generatePDF(){

    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();

    let data = [
            {
             Epic : "Support",
             Quantity : "30",
             Unit_Price: "165",
             Amount: "4000"
            },
            {
                Epic : "Development",
                Quantity : "50",
                Unit_Price: "100",
                Amount: "5000"
               },
            ];
        let head = this.createHeaders(['Epic', 'Quantity', 'Unit_Price','Amount']);
        doc.table(10, 110, data,head,{});
        doc.text(`Subtotal`, 155, 148).setTextColor(128,128,128).text(`$0.00`, 175, 148).setTextColor(0,0,0);
        doc.text(`Total`, 155, 153).setTextColor(128,128,128).text(`$9000.00`, 175, 153).setTextColor(0,0,0);


//...

doc.save("mypdf.pdf");

}

However, this is not working and throws the error above.

generatePDF(){
   //header and body are set up correctly here
   //...

   //this causes the error
   doc.autoTable(header,body,{//styling etc}

}

The very odd thing about it is it worked the first time i ever ran the code. However even after browser refresh, storage refresh, hard refresh it gives me the error every single time even though the code has not changed from first run.

I am confused why this is not working and online resources have been extremely unhelpful. I have looked at the documentation of the plugin and nothing seems to suggest this is a problem. Although I have seen a handful of people have this error without any resolution.

This is a critical task I am trying to complete so if someone has a solution that would be grateful.

Answer 1

I had the same issue and this is how I solved it

loadScript(this, jsPDF)
        .then(() => {
            // jsPDF is loaded successfully, now load jspdf-autotable
            return loadScript(this, JSPDF_PLUGIN);
        })

By using the loadScript function, you ensure that jsPDF is loaded before loading jspdf-autotable, and you avoid any issues related to the order of loading the libraries.