2016-06-06 3 views
1

Я использую jsPDF AutoTable Plugin для моей таблицы pdf.jspdf AutoTable: целевой стиль для определенной строки таблицы

Мои источники:

#javaScriptIncludeTag("jspdf.min.js")# 
#javaScriptIncludeTag("jspdf.plugin.autotable.js")# 

Мои источники являются из:

https://github.com/MrRio/jsPDF

https://github.com/simonbengtsson/jsPDF-AutoTable

Мой Сценарий:

$(function() { 

    var doc = new jsPDF('p', 'pt', 'a4'); 
    var $tables2 = $(".pdftable2"); 
    var startingY = 0; 

    $tables2.each(function(index) { 

     var $this = $(this), tableid = $this.attr('id'); 
     var res = doc.autoTableHtmlToJson(document.getElementById(tableid)); 
     var offset = 2; 
     startingY = doc.autoTableEndPosY() + offset; 

     doc.autoTable(res.columns, res.data, { 
      startY: startingY, 
      pageBreak: 'avoid', 
      theme: 'grid', 
      styles: { 
       overflow: 'linebreak', 
       fontSize: 12, 
       valign: 'middle' 
      }, 
      columnStyles: { 
       0: {valign: "top"}, 
       1: { 
        columnWidth: 20, 
        fontStyle: 'bold', 
        halign: 'center', 
       }, 
       2: { 
        columnWidth: 20, 
        fontStyle: 'bold', 
        halign: 'center', 
       }, 
       3: { 
        columnWidth: 20, 
        fontStyle: 'bold', 
        halign: 'center', 
       }, 
      } 
     }); 

    }); 

    doc.save('pdf doc'); 

}); 

Мой Markup:

<table class="pdftable2" id="j_info" border="1"> 
     <tr> 
      <th>Group Name</th> 
      <th>Yes</th>  
      <th>NA</th> 
      <th>No</th> 
     </tr> 
     <tr> 
      <td colspan="4">Sub Group name</td> 
     </tr> 
     <tr> 
      <td> 
       Phasellus sagittis tristique augue 
      </td> 
      <td></td> 
      <td>X</td> 
      <td></td> 
     </tr> 
    </table> 

Мой заголовок название группы и вторая строка после его суб название группы. Я хочу нацелить вторую строку на подгруппу и дать уникальный стиль. Как настроить таргетинг на всю строку. ниже, как выглядит мой стол.

enter image description here

ВАЖНО: Любой стиль CSS не оказывают никакого влияния на то, как выглядит PDF. Меня интересует, как PDF выглядит не так, как фактическая страница выглядит в браузере. Для всего, что имеет значение, вся таблица может быть скрыта, но jspdf AutoTable все равно отобразит ее в pdf.

+1

Вы должны проверить крюк drawCell. В репозитории jspdf-autotable есть несколько примеров. Обычно я рекомендую параметр drawRow, но в настоящее время он имеет некоторые [проблемы] (https://github.com/simonbengtsson/jsPDF-AutoTable/issues/111) –

ответ

0

Попробуйте это:

$(document).ready(function() 
{ 
    $('tr').find('td').eq(0).addClass('highlight'); 
}); 

Пример: https://jsfiddle.net/bneen5rc/

+0

Это повлияет на то, как таблица выглядит в браузере, но не способ создания PDF. Меня интересует, как создается PDF-файл. –

Смежные вопросы