3

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

4

2 回答 2

4

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

doc.autoTable({
  html: '#table',
  didParseCell(data) {
    if (data.cell.row.index === 0) {
      data.cell.styles.textColor = [255, 255, 255];
      data.cell.styles.fillColor = '#FF5783';
    }
  }
})
于 2019-01-17T17:55:08.057 回答
-2

尝试这个 ：

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

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

于 2016-06-06T22:44:43.380 回答