Comment personnaliser l'en-tête de la cellule en format PDF à l'aide jsPDF-AutoTable plugin?

J'ai rencontré de bug étrange lorsque j'essaye de convertir le HTML en pdf à l'aide de jsPDF-AutoTable plugin. Selon officiel page Github il y a la possibilité de personnaliser n'importe quel headerCell et ordinaire de la cellule à l'aide de createdHeaderCell et createdCell crochets. J'ai utilisé le code ci-dessous pour changer de style pour un particulier de l'en-tête de rangée et de cellules (Name en-tête et Jack de la cellule). J'ai aussi télécharger ce code ici.

$('#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');
});

Dans ce code createdCell crochet fonctionne comme prévu et le style de la cellule avec Jack, mais rien ne s'est passé pour Name en-tête. Ai-je raté quelque chose ou est-ce un bug?

La drôle de chose que je trouve étrange solution de contournement à l'aide de drawHeaderCell au lieu de createdHeaderCell, mais dans ce cas, le style se produit pour la prochaine Address en-tête, pas la Nameque je le voulais. Ma solution: j'ai utilisé de la précédente ID en-tête de style Name, mais cette solution pas très beau, parce que je devrais utiliser else règle pour le style, sinon le style sera appliqué pour tous les en-têtes après ID, pas seulement Name, donc je veux savoir quel est le problème avec mon code initial.

Je vous remercie pour votre attention.

OriginalL'auteur user2771704 | 2015-11-03

Puisque personne n'a répondu, j'ai utilisé ma solution de rechange à l'aide de drawHeaderCell crochet avec un code comme ci-dessous. Je l'ai testé sur de nombreux tableaux et il fonctionne très bien (dans la production, j'ai utilisé généré dynamiquement le tableau avec les différents en-têtes). Le seul inconvénient que vous ne pouvez pas changer la couleur de la 1ère à en-tête, mais j'espère que je n'ai pas besoin de le faire.

$('#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');
});

OriginalL'auteur user2771704

1

De la solution fournie par user2771704 fonctionne bien, mais comme dit sa change pas le premier en-tête de couleur, pour que l'utilisation "fillColor" que les styles.. en gros il va changer la couleur de tous les éléments et ensuite vous pouvez remplacer le corps de la cellule de la couleur avec "createdCell"
```
    doc.autoTable(columns, rows, {
        createdCell: function (cell, data) {
            cell.styles.fillColor = '#ffffff';
        },

        styles: { fillColor: "#43a047" },
    });
```
OriginalL'auteur user3571779
0

La Version 3 de jsPdf Autotables a remplacé createdCell avec didParceCell qui fournit un objet qui ressemble à ceci:

Vous pouvez ensuite ajouter un peu de code à l'intérieur de ce qui ressemble à:
```
        didParseCell: function (table) {

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

Vous devez vous connecter pour publier un commentaire.