0

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?

0

1 Answer 1

0

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");
}
1
  • From documentation, they mention: Some functions of jsPDF require optional dependencies. E.g. the html method, which depends on html2canvas and, when supplied with a string HTML document, dompurify github.com/parallax/jsPDF#optional-dependencies
    – hendra
    Jun 26, 2023 at 6:11

You must log in to answer this question.

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