Question

我正在为我的表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格式呈现。

Answer 1

试试这个：

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

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

Answer 2

Try the below code to fill give the styles to cells of particular row. Check the cell if it has styles property. If not, try with cell.cell.styles. For me, cell.cell.styles worked. 

createdCell(cell) {
  if (cell.row.index === 0) {
    cell.cell.styles.textColor = 'white';
    cell.cell.styles.fillColor = '#FF5783';
    console.log(cell.cell.raw);
  }
}

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

2 个答案: