angular - 如何在Angular2 +中的autoTable jspdf条件下更改单元格的文本颜色
问题描述
如果使用 autoTable jspdf 的“目标数据类型”和“已验证数据类型”标题列的值不同,我想将文本颜色更改为红色并将其设为粗体。我尝试了一个代码,但它不起作用。我已经用 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));
}
解决方案
我解决了查询。通过遵循此代码 -
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));
}
推荐阅读
- android-studio - Android Studio:任务“:app:compileDebugKotlin”执行失败
- objective-c - 延迟使用本地文件为 mac 应用程序自定义图标(使用 setIcon)
- express - 如何编写处理图像和表单数据上传流的突变解析器?
- azure - 如何在 Azure DevOps 上跟踪触发我的管道的原因?
- python-3.x - 使用 BeautifulSoup 或 Pandas 抓取表数据
- html - 使用 Boostrap-Vue 时如何对齐卡片标题
- apache-camel - pollEnrich 从 FTP
- swiftui - 拆分表单内联导航栏标题
- avfoundation - 什么会影响音频单元渲染回调周期(周期)?
- sql - 在 SQL 中添加和除以 2 行以获得百分比