CODEWITHSUNDEEP
javascriptphpjqueryarraysjspdf
Ronald
Ronald

Reputation: 557

Problems with JSPDF and AutoTable

I am trying to combine the "TABLE FROM HTML" with a "Header"... Looked at the examples. I can get each one working separately, but not together.

When I combine the two, I am having problems...Can you see what I am doing wrong here and why this doesnt work ??

Might be in my header VAR... Also, it there a way to exclude a column from the export ???

Using this https://github.com/simonbengtsson/jsPDF-AutoTable

 <html>
<body>
<button onclick="generate()">Download PDF</button>

<script src="jspdf/jspdf.min.js"></script>
<script src="jspdf/jspdf.plugin.autotable.src.js"></script>

<script>
    function generate() {

    var doc = new jsPDF('p', 'pt');

    var res = doc.autoTableHtmlToJson(document.getElementById("basic-table"));
    doc.autoTable(res.columns, res.data, options);

    var header = function (data) {
    doc.setFontSize(18);
    doc.setTextColor(40);
    doc.setFontStyle('normal');
    doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
    doc.text("Testing Report", data.settings.margin.left + 55, 50);
    };

    var options = {
    beforePageContent: header,
    margin: {top: 80}
    };

    doc.autoTable(columns, data, options);

    doc.save("table.pdf");
}

var headerImgData = 'data:image/jpeg;base64,/9... my dataimage';
 </script>

 <br/><br/>

<table id="basic-table">
<thead>
<tr>
    <th title="Field #1">ID</th>
    <th title="Field #2">First name</th>
    <th title="Field #3">Last name</th>
    <th title="Field #4">Email</th>
    <th title="Field #5">Country</th>
    <th title="Field #6">IP-address</th>
</tr>
</thead>
<tbody>
<tr>
    <td align="right">1</td>
    <td>Donna</td>
    <td>Moore</td>
    <td>[email protected]</td>
    <td>China</td>
    <td>211.56.242.221</td>
</tr>
<tr>
    <td align="right">2</td>
    <td>Janice</td>
    <td>Henry</td>
    <td>[email protected]</td>
    <td>Ukraine</td>
    <td>38.36.7.199</td>
</tr>
<tr>
    <td align="right">3</td>
    <td>Ruth</td>
    <td>Wells</td>
    <td>[email protected]</td>
    <td>Trinidad and Tobago</td>
    <td>19.162.133.184</td>
</tr>
<tr>
    <td align="right">4</td>
    <td>Jason</td>
    <td>Ray</td>
    <td>[email protected]</td>
    <td>Brazil</td>
    <td>10.68.11.42</td>
</tr>
<tr>
    <td align="right">5</td>
    <td>Jane</td>
    <td>Stephens</td>
    <td>[email protected]</td>
    <td>United States</td>
    <td>47.32.129.71</td>
</tr>
<tr>
    <td align="right">6</td>
    <td>Adam</td>
    <td>Nichols</td>
    <td>[email protected]</td>
    <td>Canada</td>
    <td>18.186.38.37</td>
</tr>
</tbody>
</table>

</body>
</html>

Upvotes: 1

Views: 20034

Answers (3)

naveen kumar
naveen kumar

Reputation: 1

var jsPDF = require('jspdf');
require('jspdf-autotable');

use this to import

Upvotes: 0

Techdive
Techdive

Reputation: 1043

Here is the way i exported my Table in PDF using jspdf(). I mentioned my array that would display in UI in the body part. Also mentioned the headers.

code -

 <script src="jspdf.min.js"></script>
 <script src="jspdf.plugin.autotable.min.js"></script>

  import jsPDF from 'jspdf';
 import 'jspdf-autotable';

 capture(){

   var doc = new jspdf('l', 'pt' , 'a4'); //landscape page

   doc.autoTable({

  body: this.responseData,
  columns: [{header: 'version', dataKey: 'version'}, {header: 
    'sourceFileName', 
  dataKey: 'sourceFileName'},
  {header: 'targetFileName', dataKey: 'targetFileName'}, {header: 'id', 
 dataKey: 'id'}


  ]
 ]
})

doc.save("table.pdf");
  }

P.S : https://www.npmjs.com/package/jspdf-autotable

Upvotes: 0

Simon Bengtsson
Simon Bengtsson

Reputation: 8151

I'm not entirely sure what you want to accomplish, but I made a best guess. Here is a codepen with the result. I changed your generate function to this:

function generate() {

  var doc = new jsPDF('p', 'pt');

  var res = doc.autoTableHtmlToJson(document.getElementById("basic-table"));
  doc.autoTable(res.columns, res.data, {margin: {top: 80}});

  var header = function(data) {
    doc.setFontSize(18);
    doc.setTextColor(40);
    doc.setFontStyle('normal');
    //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
    doc.text("Testing Report", data.settings.margin.left, 50);
  };

  var options = {
    beforePageContent: header,
    startY: doc.autoTableEndPosY() + 20
  };

  doc.autoTable(res.columns, res.data, options);

  doc.save("table.pdf");
}

Upvotes: 3

Related Questions