2016-08-24 2 views
0

У меня есть таблица:jsPDF - исключить выбранные столбцы и строки таблицы в формате PDF

<table id="example" cellpadding="0" cellspacing="0" border="0" class="display" width="100%"> 
    <thead> 
    <tr> 
    <th>No</th> 
    <th>Id</th> 
    <th>Name</th> 
    <th>Class</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td><td>06.2010</td><td>Mike Adams</td><td>class 1</td> 
    </tr> 
    <tr> 
     <td>2</td><td>06.2011</td><td>John Fox</td><td>class 2</td> 
    </tr> 
    <tr> 
     <td>3</td><td>06.2012</td><td>Andrew Fisher</td><td>class 3</td> 
    </tr> 
    </tbody> 
    <tfoot> 
    <th>No</th> 
    <th>ID</th> 
    <th>Name</th> 
    <th>Class</th> 
    </tfoot> 
</table> 

и я сделать мой стол можно просматривать PDF в новой вкладке из браузера:

var doc = new jsPDF('p', 'pt', 'a4'); 
    var elem = document.getElementById("example"); 
    var res = doc.autoTableHtmlToJson(elem); 
    doc.autoTable(res.columns, res.data, { 
     startY: 60, 
     styles: { 
      overflow: 'linebreak', 
      fontSize: 8, 
      columnWidth: 'wrap' 
     }, 
     columnStyles: { 
      1: {columnWidth: 'auto'} 
     } 
     }); 
    doc.output('dataurlnewwindow'); 

Из моей таблицы I хотите удалить переднюю колонку (No) и удалить последнюю строку (foot table) в формате pdf.
, но я не знаю, как его устранить.

ответ

2

Для того, чтобы удалить переднюю колонку (Нет), и последняя строка (нога таблицы), вы можете использовать

Первый шаг может быть клонировать таблицу , Второй шаг - удалить нижний колонтитул. Третьим шагом является удаление первого столбца.

Итак, новый код:

$(function() { 
 
    var doc = new jsPDF('p', 'pt', 'a4'); 
 

 
    var tbl = $('#example').clone(); 
 
    tbl.find('tfoot').remove(); 
 
    
 
    /******** 
 
    1 --> No 
 
    2 --> Id 
 
    3 --> Name 
 
    4 --> Class 
 
    *****/ 
 
    tbl.find('tr th:nth-child(1), tr td:nth-child(1)').remove(); 
 

 
    var res = doc.autoTableHtmlToJson(tbl.get(0)); 
 

 

 
    doc.autoTable(res.columns, res.data, { 
 
    startY: 60, 
 
    styles: { 
 
     overflow: 'linebreak', 
 
     fontSize: 8, 
 
     columnWidth: 'wrap' 
 
    }, 
 
    columnStyles: { 
 
     1: {columnWidth: 'auto'} 
 
    }, 
 
    createdCell: function (cell, data) { 
 
     var a = this; 
 
    } 
 
    }); 
 
    doc.output('dataurlnewwindow'); 
 
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="https://rawgit.com/MrRio/jsPDF/master/dist/jspdf.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.16/jspdf.plugin.autotable.js"></script> 
 

 

 
<table id="example" cellpadding="0" cellspacing="0" border="0" class="display" width="100%"> 
 
    <thead> 
 
    <tr> 
 
     <th>No</th> 
 
     <th>Id</th> 
 
     <th>Name</th> 
 
     <th>Class</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>06.2010</td> 
 
     <td>Mike Adams</td> 
 
     <td>class 1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>06.2011</td> 
 
     <td>John Fox</td> 
 
     <td>class 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>06.2012</td> 
 
     <td>Andrew Fisher</td> 
 
     <td>class 3</td> 
 
    </tr> 
 
    </tbody> 
 
    <tfoot> 
 
    <th>No</th> 
 
    <th>ID</th> 
 
    <th>Name</th> 
 
    <th>Class</th> 
 
    </tfoot> 
 
</table>

+0

это, кажется, только заголовок дерьмо налево, но данные не. – newbie

+0

Я думаю, что у путаницы между нет и числом, я имею изменение от числа до id, мое сообщение было обновлено. – newbie

+0

@ Обновленный сниппет Обновлено, Не могли бы вы попробовать и сообщить мне? Thanks – gaetanoM

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