Not able to render HTML in PDF using jsPDF library in LwC

Question

I am trying to build a simple custom pdf in LwC using jsPDF v2.5.1 library and loading this library using loadscript in rendered callback method, now I am trying render HTML content in PDF using doc.html in generatePDF method as shown below, but however the HTML content is not rendering.

Below is the js code.

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import jsPDF from '@salesforce/resourceUrl/jsPDF';

renderedCallback(){
        Promise.all([
            loadScript(this, jsPDF)
        ])
            .then(() => {
                console.log('jsPDF loaded');
            })
            .catch(error => {
                // Handle error if the library fails to load
                console.error('Error loading jsPDF library in catch', error);
            });
    }

generatePDF(){
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF();
       
        doc.html("<table><tr><td>Data1</td><td>Data2</td></tr><td>Data3</td><td>Data4</td></tr></table>",{
            callback: function(pdf){
                pdf.save('');
            }
        })
  }
}

Can someone point out what I am missing here?

Answer 1

When I tried your snippet it gives me the error related to dompurify as internelly it uses dompurify to sanitize the html nodes but its not included with the package.

Although after adding and loading dompurify js I still get another error mentioned below.

aura_prod.js:60 Uncaught (in promise) TypeError: Failed to execute 'createNodeIterator' on 'Document': parameter 1 is not of type 'Node'. at Object.createNodeIterator (aura_prod.js:60:88930) at _createIterator (DOMPurify:947:33) at DOMPurify.sanitize (DOMPurify:1451:28) at s (jsPDF:134:2064) at Promise.eval (jsPDF:134:3019)

dom purify cdn : https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.3/purify.js

snippet for adding dompurify in lwc

jsPDFLoaded = false; 

renderedCallback(){
    if(this.jsPDFLoaded) return;
    Promise.all([
        loadScript(this, DOMPurify),
        loadScript(this, jsPDF)
    ])
    .then(() => {
        console.log('jsPDF loaded');
        this.jsPDFLoaded = true;
    })
    .catch(error => {
        // Handle error if the library fails to load
        console.error(error);
    });
}

This might be due to Locker Service but not sure

Update

I tried jsPDF's text method and its working.

generatePDF(){
    this.__jsPDF = window.jspdf.jsPDF;
    this.__jsPDFDoc = new this.__jsPDF();
    this.__jsPDFDoc.text("Sample PDF Content", 10, 10);
    this.__jsPDFDoc.save("document.pdf");
}