Как настроить ячейку заголовка в PDF с помощью плагина jsPDF-AutoTable?

Question

Я столкнулся с странной ошибкой при попытке конвертировать HTML в pdf с помощью jsPDF-AutoTable плагин. В соответствии с official Github page существует возможность настроить любой заголовок и обычную ячейку с помощью createdHeaderCell и createdCell крючков. Я использовал приведенный ниже код для изменения стиля для отдельных заголовков и строк строк (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 как я хотел. Мое обходное решение: я использовал предыдущий заголовок 10 в стиле Name, но это решение не очень красивое, потому что я должен использовать правило else для стилизации, иначе стиль будет применяться для всех заголовков после ID, а не только Name, поэтому я хочу узнать, что не соответствует моему первоначальному коду.

Благодарим вас за внимание.

Answer 1

Поскольку никто не ответил, я использовал свое решение для решения проблемы с помощью 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'); 
});