首页 文章

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

提问于
浏览 次
4

我尝试使用 jsPDF-AutoTable 插件将HTML转换为pdf时遇到了奇怪的错误 . 根据official Github page，可以使用 createdHeaderCell 和 createdCell 钩子来定制任何headerCell和普通单元格 . 我使用下面的代码来更改特定 Headers 和行单元格的样式（ Name Headers 和 Jack 单元格） . 我也上传了这段代码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 标头没有任何反应 . 我错过了什么或者它是一个错误吗？

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

谢谢你的关注 .

javascript pdf pdf-generation jspdf html-to-pdf

2 回答

  • 4

    由于没有人回答我使用 drawHeaderCell 钩子使用我的解决方案解决方案，如下所示 . 我在许多表上测试它并且它工作正常（在 生产环境 中我使用动态生成的表与不同的头） . 唯一真正的缺点是你不能改变第一个 Headers 的颜色，但希望我不需要这样做 .

    $('#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');
});
    回复于
  • 1

    user2771704提供的解决方案将运行良好，但正如所说它不改变第一个 Headers 颜色，为此使用“fillColor”作为样式..基本上它将改变所有项目的颜色，然后你可以用“createdCell”替换正文单元格颜色“

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

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

相关问题