如何在Angular2 +中的autoTable jspdf條件下更改單元格的文本顏色

Question

如果使用 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));

  }

Answer 1

我解決了查詢。 按照此代碼 -

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

  }

Answer 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.2/jspdf.plugin.autotable.min.js"></script>
<button onclick="GeraPDF()">Gerar PDF</button>

function GeraPDF() {
  var doc = new jsPDF('p', 'pt');  
  doc.autoTable(['Nome','Sobrenome'], 
                [['Silvio', 'Santos']], {
    createdCell: function(cell, opts) {
      if (opts.column.index == 1) {        
        cell.styles.textColor = "#20a8d8";
        cell.styles.fillColor = "#000";
        console.log(cell.raw)
      }
    }
  });
  doc.save("tabela.pdf");
}