jsPDF Tutorial to Convert Two Tables with Headers with jspdf-autotable Library and Download it as PDF File

jsPDF Tutorial to Convert Two Tables with Headers with jspdf-autotable Library and Download it as PDF File

 

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>

 

READ  Node.js Passport Facebook Authentication Using Express and MongoDB Full Project

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

 

 

READ  Build a Character or String Length Counter in HTML5 CSS3 and Javascript Full Project For Beginners

 

 

Leave a Reply