CODEWITHSUNDEEP
angularjspdfjspdf-autotable
Techdive
Techdive

Reputation: 1043

jspdf-autotable - didParseCell not working

I have used jspdf-autotable and previously it was working. But I don't know why, suddenly after a month it is not working. Previously, in the didParseCell HookData, I was getting the value of the tdElement. But now I don't find any value. Has the configuration of HookData changed in the new release ? Here is my code -

app.component.ts

capture() {

    var doc = new jspdf('l', 'pt', 'a4');

    var cols = [{ title: 'Id', dataKey: 'id' },
    { title: 'Source-Field Resolved Path', dataKey: 'sourceName' }, { title: 'Source Field Technical Name', dataKey: 'sfieldName' },
    { title: 'Source Data Type', dataKey: 'sdataType' }, { title: 'Target Field Resolved Path', dataKey: 'targetName' },
    { title: 'Target Field Technical Name', dataKey: 'tfieldName' }, { title: 'Target Data Type', dataKey: 'tdataType' }, { title: 'Condition', dataKey: 'urgencyName' },
    { title: 'Description', dataKey: 'descriptionName' }, { title: 'Source Field Row No.', dataKey: 'directRowNo' },
    { title: 'Source Field Path', dataKey: 'sourceFieldPath' }, { title: 'Source Field Name', dataKey: 'sourceFieldName' },
    { title: 'Data Type Verified', dataKey: 'datatypeVerified' }]

    var tableData = [];
    for (var i = 0; i < this.responseData.length; i++) {
      tableData.push({
        'id': this.responseData[i].id, 'sourceName': this.responseData[i].sourceName, 'sfieldName': this.responseData[i].sfieldName, 'sdataType': this.responseData[i].sdataType,
        'targetName': this.responseData[i].targetName, 'tfieldName': this.responseData[i].tfieldName, 'tdataType': this.responseData[i].tdataType, 'urgencyName': this.responseData[i].urgencyName,
        'descriptionName': this.responseData[i].descriptionName, 'directRowNo': this.responseData[i].directRowNo, 'sourceFieldPath': this.responseData[i].sourceFieldPath,
        'sourceFieldName': this.responseData[i].sourceFieldName, 'datatypeVerified': this.responseData[i].datatypeVerified, 'backgroundColor': this.responseData[i].backgroundColor
      })
    }
    doc.autoTable(cols, tableData, {


        didParseCell: function (HookData ){


        console.log("HookData = ", HookData)


        var tdElement;


        tdElement = HookData.row.raw.backgroundColor
          ;
        console.log("tdElement = ", tdElement)
        if (tdElement == false && HookData.column.raw.dataKey == "datatypeVerified") {

          HookData.cell.styles.fontStyle = 'bold';
          HookData.cell.styles.textColor = [255, 0, 0]
        }


      }

    })


    document.getElementById('obj').dataset.data = 
    doc.output("datauristring");


    var blob = doc.output("blob");
    window.open(URL.createObjectURL(blob));

  }

app.component.html

<button class="btn btn-default" style="margin-left:30px" (click) = "capture()" id="capture" >Capture</button>

<object id="obj"  [attr.data]  type="application/pdf"> </object>

Upvotes: 0

Views: 4994

Answers (1)

Simon Bengtsson
Simon Bengtsson

Reputation: 8161

You are initializing your autotable with columns and rows from javascript. Therefore autoTable is not connected to any html table. The raw property of hook data (hookData.row.raw) is only an instance of tr element when autoTable is initialized with the html option.

Verified now that hookData.row.raw is an instance of tr element in the latest version,

doc.autoTable({html: '.table', didDrawCell: data => {
    console.log(data.row.raw) // Instance of <tr> element
}});

Upvotes: 2

Related Questions