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