Question

我有一张桌子：

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

从我的表中我想要消除前列（No），并删除pdf中的最后一行（foot table）。
但我不知道如何消除它。

Answer 1

为了删除前列（否）和最后一行（脚表），您可以使用

第一步可以是克隆表。第二步是删除页脚。第三步是删除第一列。

所以，新代码是：

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

jsPDF - 消除选定的列和行pdf表

1 个答案: