如何使用 jsPDF-AutoTable 插件自定义 PDF 中的 header 单元格？

Question

我在尝试使用 jsPDF-AutoTable 插件将 HTML 转换为 pdf 时遇到了一个奇怪的错误。根据official Github page there is possibility to customize any headerCell and ordinary cell by using createdHeaderCell and createdCell hooks. I used the code below to change styling for particular header and row cells (Name header and Jack cell). I also upload this code here.

$('#btn').click(function(){

            var columns = ['ID','Name','Address','Age'];
            var rows = [
            [1,'John','Vilnius',22],
            [2,'Jack','Riga',25]
            ];

            var doc = new jsPDF('p', 'pt');

            doc.setFontSize(20);
            doc.text(30, 30, 'Table'); 

            doc.autoTable(columns, rows, {
                margin: { top: 50, left: 20, right: 20, bottom: 0 },
                createdHeaderCell: function (cell, data) {
                    if (cell.raw === 'Name') {
                        cell.styles.fontSize= 15;
                       cell.styles.textColor = 111;
                    } else {//else rule for drawHeaderCell hook
                        cell.styles.textColor = 255;
                        cell.styles.fontSize = 10;

                    }
                },
                   createdCell: function (cell, data) {
                    if (cell.raw === 'Jack') {
                       cell.styles.fontSize= 15;
                       cell.styles.textColor = 111;
                    } 
                }
            });

            doc.save('output.pdf');
});

在此代码中，createdCell 挂钩按预期工作并使用 Jack 设置单元格样式，但 Name header 没有任何反应。我错过了什么还是错误？

有趣的是，我发现使用 drawHeaderCell 而不是 createdHeaderCell 的奇怪解决方法，但在这种情况下，样式出现在下一个 Address header，而不是 Name如我所愿。我的解决方法：我用之前的IDheader给Name设置样式，但是这个解决方案不是很漂亮，因为我应该使用else规则来设置样式，否则样式会被应用ID 之后的所有 header，而不仅仅是 Name，所以我想找出我的初始代码有什么问题。

感谢您的关注。

Answer 1

由于没有人回答，我使用了我的变通解决方案，使用 drawHeaderCell 钩子和如下代码。我在许多 tables 上测试它并且它工作正常（在生产中我使用动态生成的 table 和不同的 headers）。唯一真正的缺点是您无法更改第一个 header 的颜色，但希望我不需要这样做。

$('#btn').click(function(){

            var columns = ['ID','Name','Address','Age'];
            var rows = [
            [1,'John','Vilnius',22],
            [2,'Jack','Riga',25]
            ];

            var doc = new jsPDF('p', 'pt');

            doc.setFontSize(20);
            doc.text(30, 30, 'Table'); 

            doc.autoTable(columns, rows, {
                margin: { top: 50, left: 20, right: 20, bottom: 0 },
                drawHeaderCell: function (cell, data) {
                    if (cell.raw === 'ID') {//paint.Name header red
                        cell.styles.fontSize= 15;
                       cell.styles.textColor = [255,0,0];
                    } else {
                        cell.styles.textColor = 255;
                        cell.styles.fontSize = 10;

                    }
                },
                   createdCell: function (cell, data) {
                    if (cell.raw === 'Jack') {
                       cell.styles.fontSize= 15;
                       cell.styles.textColor = [255,0,0];
                    } 
                }
            });

            doc.save('output.pdf');
});

Answer 2

user2771704 提供的解决方案可以很好地工作，但如前所述，它不会改变第一个 header 颜色，因为使用 "fillColor" 作为样式..基本上它会改变所有项目的颜色并且然后你可以用 "createdCell"

替换 body 单元格颜色

    doc.autoTable(columns, rows, {
        createdCell: function (cell, data) {
            cell.styles.fillColor = '#ffffff';
        },

        styles: { fillColor: "#43a047" },
    });

Answer 3

jsPdf Autotables 的第 3 版已将 createdCell 替换为 didParceCell，它提供的对象如下所示：

然后您可以在其中添加一些代码，如下所示：

        didParseCell: function (table) {

          if (table.section === 'head') {
            table.cell.styles.textColor = '#000000';
          }
       }

如何使用 jsPDF-AutoTable 插件自定义 PDF 中的 header 单元格？

How to customize header cell in PDF using jsPDF-AutoTable plugin?

javascript

pdf

pdf-generation

html-to-pdf

jspdf