jsPDF Importing but not working in LWC

Question

I tried to use jsPDF in LWC. I uploaded jsPDF.min.js and html2cavas.min.js as static resources.

Then I load them in my component :

import jspdf from '@salesforce/resourceUrl/jspdf';
import html2canvas from '@salesforce/resourceUrl/html2canvas';

export default class TrhEmployeLeaveStatement extends LightningElement {

    jspdf = jspdf;
    html2canvas = html2canvas;

    connectedCallback() {
        // Load jspdf pdf lib from Static Resources
        loadScript(this, this.jspdf).then(() => {
            console.log("=== JSPDF LOADING ===");
            console.log("JSPDF loaded");
        }).catch(error => {
            console.log("=== JSPDF LOADING ===");
            console.log("JSPDF not loaded")
        });

        // Load jspdf pdf lib from Static Resources
        loadScript(this, this.html2canvas).then(() => {
            console.log("=== html2canvas LOADING ===");
            console.log("html2canvas loaded");
        }).catch(error => {
            console.log("=== html2canvas LOADING ===");
            console.log("html2canvas not loaded")
        });
    }

And the libs load correctly. But when I test it with a simple code which works correctly outside LWC :

async handleClickExtract() {
    const doc = new jsPDF();

    doc.html("<table><tr><td>Test11</td><td>Test12</td></tr><td>Test21</td><td>Test22</td></tr></table>",{
        callback: function(doc){
            doc.save();
        }
    })
}

But it prints me the following errror :

Uncaught (in promise) Unable to find element in cloned iframe

Do you guys have any clue about this ? Has anyone got jsPDF working in LWC ?

Thanks in advance

Answer 1

I know that almost a year has already passed, but I think that my method may be useful to someone.

    renderedCallback(){
        Promise.all([
            loadScript(this, jspdf+'/jspdf/jspdf.umd.min.js'),
        ])
    }

    generatePdf(){
        const { jsPDF } = window.jspdf;

        const doc = new jsPDF();
        doc.text("Hello world!", 10, 10);
        doc.save("a4.pdf");
    }

First of all I load plugin in renderedCallback, and use it from globals module.

Answer 2

Because of the locker service, JSPdf is not supported in LWC. Check my answer to generate pdf in LWC using standard browser API.