angularjspdfjspdf-autotable

How to change the text color of the cell on condition in autoTable jspdf in Angular2+


I want to change the text color to red and make it bold if the value of 'Target Data Type' and 'Data Type Verified' title columns are different using autoTable jspdf. I tried a code but its not working. I have written it in Angular2+.

  capture() {

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

    var cols= [ { title: 'Target Data Type', dataKey: 'tdataType' },  { 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(
       'tdataType': this.responseData[i].tdataType  , 
        'sourceFieldName' :this.responseData[i]. sourceFieldName  ,'datatypeVerified'  :this.responseData[i].datatypeVerified })
    }

    doc.autoTable(cols,tableData, {


      didParseCell: function(cell,data) {


          var tdElement;
          var tdElement2 ;
          if(cell.raw == 'Target Data Type'){

            tdElement = cell.raw.tdataType;
          }
          if ( cell.raw == 'Data Type Verified' ) {

            tdElement2 = cell.raw.datatypeVerified;


        }
        if(tdElement != tdElement2){
          cell.styles.textColor = [255,0,0];
          cell.styles.fontStyle = 'bold';
        }

    }

    })


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




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

  }

Solution

  • I solved the query. By Following this code -

      capture() {
    
        var doc = new jspdf('l', 'pt', 'a4');
    
        var cols= [{ title: 'Id', dataKey: 'id' },
        { title: 'Source-Field Resolved Path', dataKey: 'sourceName' },  { title: 'Target Data Type', dataKey: 'tdataType' }, 
        { 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  ,'tdataType': this.responseData[i].tdataType  , 'datatypeVerified'  :this.responseData[i].datatypeVerified,'backgroundColor': this.responseData[i].backgroundColor })
        }
          doc.autoTable(cols,tableData, {
    
          didParseCell: function(cell,data) {
    
             console.log("Data = ", data)
             console.log("cell = ", cell)
    
    
              var tdElement;
    
    
                tdElement = cell.row.raw.backgroundColor
    
                console.log("tdElement = ", tdElement)
                if(tdElement == false && cell.column.raw.dataKey =="datatypeVerified" ){
    
                  cell.cell.styles.fontStyle = 'bold';
                  cell.cell.styles.textColor = [255,0,0]
                }
    
    
        }
    
        }
    
         document.getElementById('obj').dataset.data = doc.output("datauristring");
    
    
          var blob = doc.output("blob");
          window.open(URL.createObjectURL(blob));
    
      }