2016-08-24 14 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)を削除し、pdfの最後の行(foot table)を削除します。
私はそれを排除する方法を知りません。

答えて

2

もし

を使用することができるフロントカラム(No)は、最後の行を除去するために(足テーブル)の最初のステップは、テーブルを複製することができます。 2番目の手順は、フッターを削除することです。 3番目の手順では、最初の列を削除します。

ので、新しいコードは次のとおりです。

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

@newbieスニペットが更新されました。ありがとう – gaetanoM

関連する問題