Welcome folks today in this blog post we will be converting two tables with headers to pdf file using jspdf library and download it as pdf file. All the source code of the application is given below.

Libraries Used

We are using two libraries for this project

jspdf is the library for generating pdf documents using javascript

jspdf-autotable is the library for converting tables to pdf using javascript

Get Started

Now in order to get started we need to make an index.html file and copy paste the following code

<button onclick="generate()">Generate PDF</button>

<table id="basic-table" style="display: none;">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
      <th>Email</th>
      <th>Country</th>
      <th>IP-address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="right">1</td>
      <td>Donna</td>
      <td>Moore</td>
      <td>dmoore0@furl.net</td>
      <td>China</td>
      <td>211.56.242.221</td>
    </tr>
    <tr>
      <td align="right">2</td>
      <td>Janice</td>
      <td>Henry</td>
      <td>jhenry1@theatlantic.com</td>
      <td>Ukraine</td>
      <td>38.36.7.199</td>
    </tr>
    <tr>
      <td align="right">3</td>
      <td>Ruth</td>
      <td>Wells</td>
      <td>rwells2@constantcontact.com</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>jray3@psu.edu</td>
      <td>Brazil</td>
      <td>10.68.11.42</td>
    </tr>
    <tr>
      <td align="right">5</td>
      <td>Jane</td>
      <td>Stephens</td>
      <td>jstephens4@go.com</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>anichols5@com.com</td>
      <td>Canada</td>
      <td>18.186.38.37</td>
    </tr>
  </tbody>
</table>

Now we need to build the logic functionality when we click the button so we need to add some javascript. So now create a file called as index.js and copy paste the following code

index.js

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,
    margin: {
      top: 80
    },
    startY: doc.autoTableEndPosY() + 20
  };

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

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

So now if you execute this application you will find when you click the button a pdf file will be downloaded if you open that file you will see the following result