Search code examples
jspdfjspdf-autotable

How can identify HTML class or specific cell in jsPDF autotable


sorry, my english is not so good. I have a question about jsPDF autotable. After hours of frustrating my code run and create a PDF file.

Here is my code:

    $('#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");
});

I have searched in the github repo and found a code snippet in the examples.js that can maybe help me but i dont know how i works right....

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

I have a table, for example

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

I want the rows respectively the cells with class "hrow" shows the text inside in bold.

How can i reach this?

Thanks for help.


Solution

  • Try something like this:

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

    Not tested, but should make cells that has the css class hrow bold.