【问题标题】:How can identify HTML class or specific cell in jsPDF autotable如何识别 jsPDF 自动表中的 HTML 类或特定单元格
【发布时间】:2017-11-14 13:45:20
【问题描述】:

对不起,我的英语不太好。我有一个关于 jsPDF 自动表的问题。 经过数小时令人沮丧的代码运行并创建一个 PDF 文件。

这是我的代码:

    $('#printBtn').on('click', function() {
    var pdf = new jsPDF('p', 'pt', 'a4');
    var res = pdf.autoTableHtmlToJson(document.getElementById("tablePrint"));

    pdf.autoTable(res.columns, res.data, {
        theme : 'plain',
        styles: {
            fontSize: 12
        },
        showHeader: 'never'
    });

    pdf.save("test.pdf");
});

我在 github 存储库中搜索并在 examples.js 中找到了一个代码 sn-p,它可能对我有帮助,但我不知道我是如何工作的......

        parsedInput: function (cell, data) {
            if (data.column.dataKey === 'name') {
                cell.styles.fontStyle = 'bold';
            }
        }

我有一张桌子,例如

<table>
<tbody>
<tr>
<td class="hrow">15.11.2016</td>
<td class="hrow">11:20</td>
<td class="hrow"></td>
</tr>
<tr>
<td></td>
<td>Musterfrau</td>
<td>Mustermann</td>
</tr>
<tr>
<td></td>
<td>Musterfrau XYZ</td>
<td>XXX</td>
</tr>
<tr>
<td class="hrow">15.11.2016</td>
<td class="hrow">11:20</td>
<td class="hrow"></td>
</tr>
<tr>
<td></td>
<td>Musterfrau</td>
<td>Mustermann</td>
</tr>
<tr>
<td></td>
<td>Musterfrau XYZ</td>
<td>XXX</td>
</tr>
<tr>
<td></td>
<td>Example cell</td>
<td>acusduhfsd</td>
</tr>
<tr>
<td class="hrow">15.11.2016</td>
<td class="hrow">11:20</td>
<td class="hrow"></td>
</tr>
<tr>
<td></td>
<td>Musterfrau dfg</td>
<td>Mustermann dfhgd</td>
</tr>
<tr>
</tbody>
</table>

我希望行分别带有“hrow”类的单元格以粗体显示里面的文本。

我怎样才能做到这一点?

感谢您的帮助。

【问题讨论】:

    标签: jspdf jspdf-autotable


    【解决方案1】:

    试试这样的:

    pdf.autoTable(res.columns, res.data, {
        didParseCell: function(data) {
            var tdElement = data.cell.raw;
            if (tdElement.classList.contains('hrow')) {
                data.cell.styles.fontStyle = 'bold';
            }
        }
    });
    

    未测试,但应使单元格具有 css 类 hrow 粗体。

    【讨论】:

      猜你喜欢
      • 2012-09-29
      • 1970-01-01
      • 1970-01-01
      • 2015-11-07
      • 2013-03-26
      • 1970-01-01
      • 2022-11-24
      • 2020-02-11
      • 2015-10-14
      相关资源
      最近更新 更多