3

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

You must log in to answer this question.

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