CODEWITHSUNDEEP
jqueryjspdfjspdf-autotable
newbie
newbie

Reputation: 959

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.

Upvotes: 1

Views: 5242

Answers (1)

gaetanoM
gaetanoM

Reputation: 42044

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>

Upvotes: 4

Related Questions