3

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

1

2 Answers 2

6

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.

5
  • Have you tried this? I don't it will work. Commented Jan 12, 2021 at 4:11
  • @DhanikLalSahni, Yes. It works for me, from yesterday doesn't have any problems yet.
    – Moonvvell
    Commented Jan 12, 2021 at 8:41
  • Hey, it's awesome, I've always thought that it didn't work because the library wasn't Locker Compliant !
    – Ombrelin
    Commented Jan 16, 2021 at 19:17
  • @Moonvvell, In LWC, the PDF is getting distorted, while it works well otherwise Do you have any idea? For further information, see: Details
    – user43598
    Commented May 6, 2021 at 15:37
  • thanks, @Moonvvell!
    – vilelam
    Commented Jul 8, 2021 at 16:17
5

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .