jspdf AutoTable: 为特定表格行设置目标样式

Question

我正在使用jsPDF AutoTable插件来生成表格PDF文件。

我的来源：

#javaScriptIncludeTag("jspdf.min.js")#
#javaScriptIncludeTag("jspdf.plugin.autotable.js")#

我的来源是：

https://github.com/MrRio/jsPDF

https://github.com/simonbengtsson/jsPDF-AutoTable

我的脚本：

$(function() {

    var doc = new jsPDF('p', 'pt', 'a4');
    var $tables2 = $(".pdftable2");
    var startingY = 0;

    $tables2.each(function( index ) {

        var $this = $(this), tableid = $this.attr('id');
        var res = doc.autoTableHtmlToJson(document.getElementById(tableid));
        var offset =  2;
        startingY = doc.autoTableEndPosY() + offset;

        doc.autoTable(res.columns, res.data, {
            startY: startingY,
            pageBreak: 'avoid',
            theme: 'grid',
            styles: {
                overflow: 'linebreak',
                fontSize: 12,
                valign: 'middle'
            },
            columnStyles: {
                0: {valign: "top"}, 
                1: {
                    columnWidth: 20,
                    fontStyle: 'bold',
                    halign: 'center', 
                },
                2: {
                    columnWidth: 20,
                    fontStyle: 'bold',
                    halign: 'center', 
                },
                3: {
                    columnWidth: 20,
                    fontStyle: 'bold',
                    halign: 'center', 
                },
            }
        });

    }); 

    doc.save('pdf doc');

});

我的标记：

<table class="pdftable2" id="j_info" border="1">
        <tr>
            <th>Group Name</th> 
            <th>Yes</th>    
            <th>NA</th>
            <th>No</th>
        </tr>
        <tr>
            <td colspan="4">Sub Group name</td> 
        </tr>
        <tr>
            <td>
                Phasellus sagittis tristique augue
            </td>
            <td></td>
            <td>X</td>
            <td></td>
        </tr>
    </table>

我的标题是组名，它后面的第二行是子组名。我想针对带有子组的第二行设置独特的样式。如何定位整个行？下面是我的表格模样。

重要提示：任何CSS样式都不会影响PDF的外观。我关心的是PDF的外观，而不是实际页面在浏览器中的外观。就所有事情而言，整个表格都可以隐藏，但是jspdf AutoTable仍然会在PDF中呈现它。

- Saad A

---

你应该查看 drawCell 钩子。在 jspdf-autotable 存储库中有一些示例。我通常会推荐使用 drawRow 选项，但它目前存在一些问题（https://github.com/simonbengtsson/jsPDF-AutoTable/issues/111）。 - Simon Bengtsson

Answer 1

尝试以下代码，为特定行的单元格添加样式。

doc.autoTable({
  html: '#table',
  didParseCell(data) {
    if (data.cell.row.index === 0) {
      data.cell.styles.textColor = [255, 255, 255];
      data.cell.styles.fillColor = '#FF5783';
    }
  }
})

- Uday Kumar

---

为什么样式也被应用到标题栏上了？我已经测试过，它也适用于标题栏吗？ - Ahmed C

Answer 2

尝试这个：

$(document).ready(function()
{
  $('tr').find('td').eq(0).addClass('highlight');
});

示例：https://jsfiddle.net/bneen5rc/

- DinoMyte

---

这将影响表格在浏览器中的显示方式，但不会影响PDF生成的方式。我对PDF生成方式感兴趣。 - Saad A