jspdf AutoTable:表的特定行的目标样式 [英] jspdf AutoTable : Target style for specific row of a table

问题描述

我正在为表pdf使用jsPDF AutoTable插件.

I am using jsPDF AutoTable Plugin for my table 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>

我的标题是组名，其后的第二行是子组名.我想将第二行定位为子组，并给出一种独特的样式.如何定位整个行.下面是我的桌子的样子.

My header is the group name and the second row after it is sub group name. I want to target the second row with sub group and give a unique style. How do I target that entire row. below is what my table looks like.

重要提示:任何CSS样式都不会影响pdf的外观.我对pdf的外观感兴趣，而不对浏览器中的实际页面外观感兴趣.对于所有问题，整个表都可以隐藏，但是jspdf AutoTable仍将其呈现为pdf.

IMPORTANT NOTE: Any css style have no effect on the way the pdf looks. I am interested in how the pdf looks not how the actual page looks in the browser. For all it matters, the entire table can be hidden, but jspdf AutoTable will still render it in a pdf.

推荐答案

尝试以下代码为特定行的单元格提供样式.

Try the below code to give the styles to cells of particular row.

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

这篇关于jspdf AutoTable:表的特定行的目标样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！