如何通過DataTables pdf導出中的CSS類自定義列字體（大小和樣式）？

Question

你們能告訴我如何使用css類在DataTables html5 PDF Export的customize（doc）函數中從doc對象更改列字體大小和權重。

我有一個數據表，其中某些列必須比其他列大膽且更大。

我有以下按鈕定義（，這似乎不起作用

$('.data-table').DataTable({
buttons: [
            {
                extend: 'pdfHtml5',
                text: '<i class="fa fa-file-pdf-o fa-lg" style="color: red"></i> PDF',
                titleAttr: 'Export to PDF',
                orientation: 'auto',
                className: 'btn btn-default',

                customize: function (doc) {
                    doc.defaultStyle.fontSize = 8;

                    doc.content[1].table.widths = ['*', 70, 70];

                    doc.styles['td.bigcol'] = {
                        fontSize: 16,
                        bold: true,
                    };

                    doc.content.splice(1, 0, {
                        margin: [0, 0, 0, 12],
                        image: 'data:image/png;base64,' + imageStr,
                        fit: [80, 80]
                    });

                }
            }
        ]
});

我的表與此類似：

<table class="table data-table">
<thead>
<tr>
   <td class="bigCol">
            Some List of things
        </td>
        <td></td>
        <td></td>
    </tr>
</thead>

<tbody>
    <tr>
        <td class="bigCol">On List 1</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td class="bigCol">list 1 totals</td>
        <td>data</td>
        <td>data</td>
    </tr>
  </tbody>
</table>

就像清單9一樣。該表在瀏覽器窗口中正確顯示，但pdf ayayayyy

謝謝。

Answer 1

終於得到它..從幫助這個帖子 。

在定制功能上，使用Jquery I循環遍歷每個表的行，然后遍歷每行的列以獲取行索引和列索引，然后在doc對象中使用表上的那些索引為列定義樣式

doc.content[1].table.widths = ['*', 70, 70];

$('.data-table').find('tr').each(function(ix, row) {
    var index = ix;

    $(row).find('td').each(function(ind, column) {
        if ($(column).hasClass('bigCol')) {

            var fontSize = $(column).css('font-size').replace('px', '');

            doc.content[1].table.body[index][ind].style = {
                fontSize: parseInt(fontSize)
                bold: true
            };
        }
    });
});

DOM表上的索引等同於文檔表主體對象上的索引