newbie newbie - 3 months ago 122
jQuery Question

jsPDF - eliminate selected column and row pdf table

I have a table:

<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>


and i have making my table can view pdf in new tab from browser:

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');


From my table I want eliminate front column (
No
), and remove last row (
foot table
) in pdf.

but I don't know how to eliminate it.

Answer

In order to remove front column (No), and last row (foot table) you may use

The first step can be to clone the table. The second step is to remove the footer. While the third step is to remove the first column.

So, the new code is:

$(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>

Comments