Question

我正在尝试使用jsPDF + AutoTable基于交互式/动态表创建PDF。行中的最后一个单元格将显示“是”或“否”-如果该单元格显示“是”，则应突出显示整个行。

最接近的是使单元格突出显示，但是我需要整行突出显示。我似乎无法将单元格绑定到行索引。

到目前为止，这是我的代码：

willDrawCell: function (data) {
   if (data.cell.text == "Yes") {
      doc.setFillColor(67, 160, 71);
   }
}

感谢您的帮助。

Answer 1

我能够解决这个问题！

在调用doc.autoTable（）之前，我先计算“是”所在的索引，然后将这些值存储在数组中。然后，我根据需要循环遍历每个行索引和setFillColor。这是我的代码现在的样子：

willDrawCell: function (data) {
  if (data.cell.text == "Yes") {
   doc.setFillColor(67, 160, 71);
  }
   for (let i = 0; i < ready_rows.length; i++) {
        if (data.row.index === ready_rows[i]) {
             doc.setFillColor(239, 154, 154);
           }
    }
}

Answer 2

这里 currentRow 是自动表中给出的行

                 
    var res1 = doc.autoTableHtmlToJson(document.getElementById(m));
        var idmm=document.getElementById(n);
              
                var clength=res1.columns.length;
                 var crow=res1.rows.length;
        
         doc.autoTable(res1.columns, res1.data, {margin: {top: vy+25},pageBreak: 'auto',styles: {cellPadding: 1.5,fontSize:fsize , },fontStyle: 'bold',drawRow: function (row, data) {
                currentRow1 = row;
                        currentRow1.height =30;
                      
                     
 if((currentRow1.cells[0].text[0].includes('Total')) || (currentRow1.cells[0].text[0].includes('Avg'))||(currentRow1.cells[0].text[0].includes('count'))||(currentRow1.cells[0].text[0].includes('Min'))||(currentRow1.cells[0].text[0].includes('Max')))

  {
                    1
                         for(var i=0;i<res1.columns.length;i++)
                              {
                              
                                  currentRow1.cells[i].styles.fontStyle = "bold";
                                  currentRow1.cells[i].styles.font = "sans-serif" ; 
                                  currentRow1.cells[i].styles.fillColor = [243,205,204];                 
                                  currentRow1.cells[1].styles.columnWidth="wrap";
                                  currentRow1.cells[1].styles.FontSize=30;
                                  
                                  }
                                 
                               
                                  
  }                    
        
                
    },columnStyles: {0: {columnWidth: columnwidthrgroup},},});

    ```

如何使用jsPDF AutoTable根据单个单元格值对行进行着色？

2 个答案: