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

Posted

技术标签:

【中文标题】如何使用 jsPDF-AutoTable 插件自定义 PDF 中的标题单元格?【英文标题】:How to customize header cell in PDF using jsPDF-AutoTable plugin? 【发布时间】:2016-02-04 00:54:22 【问题描述】:

我在尝试使用 jsPDF-AutoTable 插件将 html 转换为 pdf 时遇到了奇怪的错误。根据official Github page,可以使用createdHeaderCellcreatedCell 挂钩自定义任何headerCell 和普通单元格。我使用下面的代码更改特定标题和行单元格的样式(Name 标题和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 标头,而不是我想要的Name。我的解决方法:我使用以前的ID 标头来设置Name 的样式,但是这个解决方案不是很漂亮,因为我应该使用else 规则进行样式设置,否则样式将应用于ID 之后的所有标头,而不仅仅是@ 987654339@,所以我想看看我的初始代码有什么问题。

感谢您的关注。

【问题讨论】:

【参考方案1】:

jsPdf Autotables 的第 3 版已将 createdCell 替换为 didParceCell,它提供了一个如下所示的对象:

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

        didParseCell: function (table) 

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

【讨论】:

【参考方案2】:

user2771704 提供的解决方案效果很好,但如前所述,它不会更改第一个标题颜色,因为使用“fillColor”作为样式。基本上它会更改所有项目的颜色,然后您可以替换正文单元格颜色用“createdCell”

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

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

【讨论】:

【参考方案3】:

由于没有人回答,我使用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');
);

【讨论】:

以上是关于如何使用 jsPDF-AutoTable 插件自定义 PDF 中的标题单元格?的主要内容,如果未能解决你的问题,请参考以下文章

如何在另一个插件菜单下添加新的自定义子菜单

Grails 安全插件自定义重定向

在“成员”Wordpress 插件中添加自定义功能

WordPress 创建自定义功能

vue+elementUi+dialog封装自定dialog部分属性,并打包成插件npm install mj-dialog --savedisplayjustifybetween

php [WordPress] [WP Rocket]自定义功能(MU)插件的Boilerplate。