jspdf AutoTable：表格特定行的目标样式答案

【问题标题】：jspdf AutoTable : Target style for specific row of a tablejspdf AutoTable：表格特定行的目标样式
【发布时间】：2016-10-06 15:36:13
【问题描述】：

我正在为我的表格 pdf 使用 jsPDF AutoTable 插件。

我的消息来源：

#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。

【问题讨论】：

你应该看看 drawCell 钩子。 jspdf-autotable repo 中有一些示例。我通常会推荐 drawRow 选项，但它目前有一些 issues

标签： javascript jquery jspdf jspdf-autotable

【解决方案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';
    }
  }
})

【讨论】：

为什么样式也适用于标题，我已经测试过了，它也适用于标题？

【解决方案2】：

试试这个：

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

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

【讨论】：

这将影响表格在浏览器中的外观，但不会影响 pdf 的生成方式。我对如何生成 pdf 感兴趣。