Angular 9 jsPDF-Autotable didParseCell Example in Browser Using Javascript Full Project For Beginners

 

 

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>

 

See also  Node.js Angular 9 Tutorial to Export PDF Documents Using PDFMake.js Library Using ng-pdf-make Directive Using Javascript Full Project For Beginners

 

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
}});

Leave a Reply