0

I'm trying to figure out how to use jsPDF html() method in LWC. To use a pure jsPDF is relatively easy, but I didn't find an explanation on how to do it with the jsPDF html() method. I did a search. Trust me. I uploaded jsPDF and html2canvas to the Static Resources. I made Cache Control public. I also tried to load core-js because the jsPDF callback is using it as I read somewhere. It did not help. So I removed it from Static Resources I ended up using Light DOM in child component and Shadow DOM in parent component as required in docs. Also I enabled Lightning Web Security in Session Settings to avoid this error: "Invariant violation.Expeccted template to be an object"

Test logic is simple: parent component gets Accounts from Apex controller and provides them to the child component which has a div with lightning-datatable. I use renderedCallback to load scripts because DOM will be created after the connectedcallback execution. Callback that should return the current jsPDF instance as first parameter returns an error. This is the code and the error.

Parent HTML
<template >
    <p class="slds-var-m-bottom_small">
        <lightning-button label="Load Accounts" onclick={handleLoad}></lightning-button>
    </p>
    <template  if:true={data} >
        <c-generate-pdf-child tabledata={data} ></c-generate-pdf-child>
    </template>
</template>

ParentJS
import { LightningElement } from 'lwc';
import getAccountList from '@salesforce/apex/AccountController.getAccountList';

export default class GeneratePDF extends LightningElement {
    data = [];

    handleLoad() {
        getAccountList()
            .then((data) => {
                this.data = data;
            }).catch((error) => { console.log(error) });
    }
}

Child HTML
<template lwc:render-mode='light'>
    <div  class="pdftable" >
        <lightning-datatable
                key-field="id"
                data={tabledata}
                columns={columns}>
        </lightning-datatable>
    </div>
    <p class="slds-var-m-bottom_small">
        <lightning-button label="Generate PDF" onclick={generate}></lightning-button>
    </p>
</template>

Child JS
import { LightningElement, api } from 'lwc';
import { loadScript } from "lightning/platformResourceLoader";
import PDF from '@salesforce/resourceUrl/jsPDF';
import html2Canvas from '@salesforce/resourceUrl/html2canvas';

const columns = [
    { label: 'Name', fieldName: 'Name' },
    { label: 'Industry', fieldName: 'Industry' },
    { label: 'Phone', fieldName: 'Phone', type: 'phone' },
    { label: 'Rating', fieldName: 'Rating' },
    { label: 'Website ', fieldName: 'Website ', type: 'url' },
];

export default class GeneratePdfChild extends LightningElement {
    static renderMode = 'light'; // the default is 'shadow'

    @api tabledata;
    columns = columns;
    renderedCallback() {
        Promise.all([
            loadScript(this, PDF),
            loadScript(this, html2Canvas),
        ])
    }
   generate() {
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF('p', 'pt', 'a4')
        const elementHTML = this.querySelector('.pdftable')

        try {
            let srcwidth = elementHTML.scrollWidth
            doc.html(elementHTML, {
                margin: [30, 0, 30, 0], 
                html2canvas: {
                    scale: 595.26 / srcwidth, //595.26 is the width of A4 page
                    scrollY: 0
                },
                callback: function (docPDF) {  
                    docPDF.save('accounts.pdf');
                },
                x: 0,
                y: 0,
            })
        } catch (e) {
            console.log(e)
        }
    }
}

Error

Mutations on the membrane of an object originating outside of the sandbox will not be reflected on the object itself:
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
aura_proddebug.js:39470 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'error')
    at Object.apply (aura_proddebug.js:39470:26)
    at aura_proddebug.js:36729:25
    at LWS
    at DocumentCloner.toIFrame (eval at <anonymous> (eval at createRedConnector$LWS (aura_proddebug.js:37584:12)), <anonymous>:5269:27)
    at eval (eval at <anonymous> (eval at createRedConnector$LWS (aura_proddebug.js:37584:12)), <anonymous>:7757:57)
    at step (eval at <anonymous> (eval at createRedConnector$LWS (aura_proddebug.js:37584:12)), <anonymous>:86:27)
    at Object.eval [as next] (eval at <anonymous> (eval at createRedConnector$LWS (aura_proddebug.js:37584:12)), <anonymous>:67:57)
    at eval (eval at <anonymous> (eval at createRedConnector$LWS (aura_proddebug.js:37584:12)), <anonymous>:60:75)
    at eval (eval at createRedConnector$LWS (aura_proddebug.js:37584:12), <anonymous>:3271:25)
    at LWS
    at new Promise (<anonymous>)
    at aura_proddebug.js:36767:25
    at LWS
    at __awaiter (eval at <anonymous> (eval at createRedConnector$LWS (aura_proddebug.js:37584:12)), <anonymous>:56:16)
    at renderElement (eval at <anonymous> (eval at createRedConnector$LWS (aura_proddebug.js:37584:12)), <anonymous>:7711:59)
    at html2canvas (eval at <anonymous> (eval at createRedConnector$LWS (aura_proddebug.js:37584:12)), <anonymous>:7706:16)
    at Proxy.eval (eval at <anonymous> (eval at createRedConnector$LWS (aura_proddebug.js:37584:12)), <anonymous>:134:7159)
    at eval (eval at createRedConnector$LWS (aura_proddebug.js:37584:12), <anonymous>:3271:25)
    at LWS

I'm stuck in this place. I do not understand the meaning of this error. Could you help me please?

Alex
  • 1
  • 1

0 Answers0