1

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.

2 Answers 2

2

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');
});
3
  • You are awesome man! Thank you so much!
    – gs650x
    May 5, 2021 at 12:13
  • 1
    @gs650x You're welcome!
    – sfdcfox
    May 5, 2021 at 12:13
  • I updated my code as suggested by you and it worked for once, I am experiencing really strange behavior, I have updated my question under the UPDATE section would you please take a look and suggest if I am still missing something or is it a salseforce bug
    – gs650x
    May 5, 2021 at 13:13
1

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.

5
  • Thank you so much, this is working as expected.
    – gs650x
    May 11, 2021 at 12:28
  • @gs650x, Great to hear. Just out of curiosity, is your solution working well for multiple pages? For me it didn't work, entire page was getting distorted (in case of multiple pages in the pdf, and this happens only with jspdfAutotable in LWC otherwise with the same code, and outside LWC, multiple pages works fine ;) ).
    – user43598
    May 12, 2021 at 13:14
  • Actually, I didn't try on multiple pages, Could you post your question here and send the link I will try it on multiple pages and will confirm back.
    – gs650x
    May 12, 2021 at 13:30
  • Link
    – user43598
    May 12, 2021 at 13:37
  • Thanks, I might take more than a day but I will try and get back to .
    – gs650x
    May 12, 2021 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.