如何使用 jsPDF-AutoTable 插件自定义 PDF 中的标题单元格?

use*_*704 6 javascript pdf pdf-generation html-to-pdf jspdf

我在尝试使用jsPDF-AutoTable插件将 HTML 转换为 pdf 时遇到了奇怪的错误。据官方Github的页面有可能通过使用自定义任何headerCell和普通电池createdHeaderCellcreatedCell挂钩。我使用下面的代码来更改特定标题和行单元格(Name标题和Jack单元格)的样式。我也在这里上传此代码。

$('#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');
});
Run Code Online (Sandbox Code Playgroud)

在此代码中,createdCell钩子按预期工作并使用 设置单元格样式Jack,但Name标题没有任何反应。我错过了什么还是一个错误?

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

谢谢您的关注。

use*_*704 6

由于没有人回答,我使用drawHeaderCell带有如下代码的钩子使用了我的解决方法。我在许多表上测试了它并且它工作正常(在生产中我使用动态生成的带有不同标题的表)。唯一真正的缺点是您无法更改第一个标题的颜色,但希望我不需要这样做。

$('#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');
});
Run Code Online (Sandbox Code Playgroud)