2

I am trying to generate pdf using JSPdf in LWC using the below code. The lwc is embedded on Account record page. However I am getting the error. It is happening just before the line in JS

doc.table(30, 30, this.contactList, this.headers, { autosize:true });

Uncaught (in promise) TypeError: Cannot read property '0' of undefined at Object.t.cell (jspdf:187) at Object.t.table (jspdf:187) at f.generatePdf (jspdfDemo.js:4) at eval

I am pasting the code here, please advise how to fix.

HTML:

<template>
<lightning-button onclick={generateData} label="Generate PDF"></lightning-button>
</template>

JS:

import {LightningElement} from 'lwc';
import {loadScript} from "lightning/platformResourceLoader";
import JSPDF from '@salesforce/resourceUrl/jspdf';
import getContacts from '@salesforce/apex/PdfGenerator.getContactsController';

export default class JspdfDemo extends LightningElement {
    contactList = [];
    headers = this.createHeaders([
        "Id",
        "FirstName",
        "LastName"
    ]);

    renderedCallback() {
        Promise.all([
            loadScript(this, JSPDF)
        ]);
    }

    generatePdf(){
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF({
            encryption: {
                userPassword: "user",
                ownerPassword: "owner",
                userPermissions: ["print", "modify", "copy", "annot-forms"]
                // try changing the user permissions granted
            }
        });

        doc.text("This is test pdf", 20, 20);
        doc.table(30, 30, this.contactList, this.headers, { autosize:true });
        doc.save("demo.pdf");
    }

    generateData(){
        getContacts().then(result=>{
            this.contactList = result;
            this.generatePdf();
        });
    }

    createHeaders(keys) {
        var result = [];
        for (var i = 0; i < keys.length; i += 1) {
            result.push({
                id: keys[i],
                name: keys[i],
                prompt: keys[i],
                width: 65,
                align: "center",
                padding: 0
            });
        }
        return result;
    }

}

Class:

public with sharing class PdfGenerator
{
    @AuraEnabled
    public static List<Contact> getContactsController(){
        return [SELECT Id, FirstName, LastName FROM Contact LIMIT 1000];
    }
}
0

1 Answer 1

3

make sure your static resource is public... also try putting console log and verify if this.contactList is having value in proper format.

JSON.stringify(this.contactList) should give the result as

[{"Id":"A","FirstName":"B","LastName":"C"},{"Id":"D","FirstName":"E","LastName":"F"}];

used your code, and got a proper pdf downloaded.

One recommendation:

As mentioned in the example of Use Third-Party JavaScript Libraries always restrict script to get load multiple times

eg:

renderedCallback(){
        if (this.jsPdfInitialized) {
            return;
        }
        this.jsPdfInitialized = true;

        Promise.all([
            loadScript(this, jsPDF)
        ]);
    }
1
  • Thank you so much! Yes, it was a data issue due to contacts with firstname blank. It worked!
    – Priyanka
    Jun 11, 2021 at 20:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.