jsPDF Tutorial to Generate a Striped Table Salary Invoice Template Using jsPDF-Autotable Library in Javascript Full Project For Beginners

jsPDF Tutorial to Generate a Striped Table Salary Invoice Template Using jsPDF-Autotable Library in Javascript Full Project For Beginners

 

Welcome folks today in this post we will be generating striped table salary invoice template in jspdf and will be using jspdf-autotable plugin to generate tables inside pdf. We will be using javascript for this application

 

 

 

Libraries Used

 

 

We are using the following libraries to generate this application

 

jspdf library cdn

 

jspdf-autotable cdn

 

 

 

Get Started

 

 

 

In order to get started we need to create a index.html file and copy paste the following code

 

 

index.html

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>jsPDF Striped Table Invoice Template Using jsPDF-Autotable Library</title>
  </head>
  <body>

</body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.2.4/jspdf.plugin.autotable.min.js"></script>
</html>

 

 

 

Now after this we will writing the html template source code as shown below.

 

 

<table>
  <thead>
    <tr>
      <th scope="col" colspan="2">Item</th>
      <th scope="col">Qty</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <strong class="book-title">Don’t Make Me Think</strong>  
        <span class="text-offset">by Steve Krug</span>
      </td>
      <td class="item-stock">In Stock</td>
      <td class="item-qty">1</td>
      <td class="item-price">$30.02</td>
    </tr>
    
    <tr>
      <td>
        <strong class="book-title">A Project Guide to UX Design</strong>
        <span class="text-offset">by Russ Unger & Carolyn Chandler</span>
      </td>
      <td class="item-stock">In Stock</td>
      <td class="item-qty">2</td>
      <td class="item-price">$52.94 <span class="text-offset item-multiple">$26.47 × 2</span></td>
    </tr>
    
    <tr>
      <td>
        <strong class="book-title">Introducing HTML5</strong>
        <span class="text-offset">by Bruce Lawson & Remy Sharp</span>
      </td>
      <td class="item-stock">Out of Stock</td>
      <td class="item-qty">1</td>
      <td class="item-price">$22.23</td>
    </tr>
    
    <tr>
      <td>
        <strong class="book-title">Bulletproof Web Design</strong>
        <span class="text-offset">by Dan Cederholm</span>
      </td>
      <td class="item-stock">In Stock</td>
      <td class="item-qty">1</td>
      <td class="item-price">$30.17</td>
    </tr>
    
  </tbody>
  
  <tfoot>
    <tr class="text-offset">
      <td colspan="3">SubTotal</td>
      <td>135.36</td>
    </tr>
    <tr class="text-offset">
      <td colspan="3">Tax</td>
      <td>13.54</td>
    </tr>
    <tr class="text-offset">
      <td colspan="3">Total</td>
      <td>148.90</td>
    </tr>
  </tfoot>
</table>

 

See also  Build Vue.js Whatsapp API Message me Link Generator Tool Using Mobile Number in HTML5 & Javascript Full Project For Beginners

We will write some css code as well which is shown below as follows

 

 

table {
  border-collapse: collapse;
  border-spacing: 0;
  color: #4a4a4d;
  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;

}

th, td {
  padding: 10px 15px;
  vertical-align: middle;
}


thead {
  background: #395870;
  background: linear-gradient(#49708f, #293f50);
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
}

th:first-child {
  border-top-left-radius: 5px;
  text-align: left;
}

th:last-child {
  border-top-right-radius: 5px; 
}

tbody tr:nth-child(even){
  background: #f0f0f2;
}

td {
  border-bottom: 1px solid #cecfd5;
  border-right: 1px solid #cecfd5;
}

td:first-child {
  border-left: 1px solid #cecfd5;
}

.book-title {
  color: #395870;
  display: block;
}

.text-offset {
  color: #7c7c80;
  font-size: 12px;
}

.item-stock,
.item-qty {
  text-align:center;
}

.item-price {
  text-align:right;
}

.item-multiple {
  display: block;
}

tfoot {
  text-align: right;
}

tfoot tr:last-child {
  background: #f0f0f2;
  color: #395870;
  font-weight: bold;
}

tfoot tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
tfoot tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

 

 

Now we will be writing the basic javascript code to generate the pdf file

 

 

<script>
    var doc = new jsPDF()
  doc.autoTable({ html: '#my-table' })
  doc.save('table.pdf')
  </script>

 

 

 

Now if you run the index.html inside the browser you will see the following pdf file generated and it will look something like this

 

 

 

 

 

 

Full Source Code

 

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>jsPDF Striped Table Invoice Template Using jsPDF-Autotable Library</title>
  </head>
  <style>
    table {
  border-collapse: collapse;
  border-spacing: 0;
  color: #4a4a4d;
  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;

}

th, td {
  padding: 10px 15px;
  vertical-align: middle;
}


thead {
  background: #395870;
  background: linear-gradient(#49708f, #293f50);
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
}

th:first-child {
  border-top-left-radius: 5px;
  text-align: left;
}

th:last-child {
  border-top-right-radius: 5px; 
}

tbody tr:nth-child(even){
  background: #f0f0f2;
}

td {
  border-bottom: 1px solid #cecfd5;
  border-right: 1px solid #cecfd5;
}

td:first-child {
  border-left: 1px solid #cecfd5;
}

.book-title {
  color: #395870;
  display: block;
}

.text-offset {
  color: #7c7c80;
  font-size: 12px;
}

.item-stock,
.item-qty {
  text-align:center;
}

.item-price {
  text-align:right;
}

.item-multiple {
  display: block;
}

tfoot {
  text-align: right;
}

tfoot tr:last-child {
  background: #f0f0f2;
  color: #395870;
  font-weight: bold;
}

tfoot tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
tfoot tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

  </style>
  <body>
    <table id="my-table">
      <thead>
        <tr>
          <th scope="col" colspan="2">Item</th>
          <th scope="col">Qty</th>
          <th scope="col">Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <strong class="book-title">Don’t Make Me Think</strong>  
            <span class="text-offset">by Steve Krug</span>
          </td>
          <td class="item-stock">In Stock</td>
          <td class="item-qty">1</td>
          <td class="item-price">$30.02</td>
        </tr>
        
        <tr>
          <td>
            <strong class="book-title">A Project Guide to UX Design</strong>
            <span class="text-offset">by Russ Unger & Carolyn Chandler</span>
          </td>
          <td class="item-stock">In Stock</td>
          <td class="item-qty">2</td>
          <td class="item-price">$52.94 <span class="text-offset item-multiple">$26.47 × 2</span></td>
        </tr>
        
        <tr>
          <td>
            <strong class="book-title">Introducing HTML5</strong>
            <span class="text-offset">by Bruce Lawson & Remy Sharp</span>
          </td>
          <td class="item-stock">Out of Stock</td>
          <td class="item-qty">1</td>
          <td class="item-price">$22.23</td>
        </tr>
        
        <tr>
          <td>
            <strong class="book-title">Bulletproof Web Design</strong>
            <span class="text-offset">by Dan Cederholm</span>
          </td>
          <td class="item-stock">In Stock</td>
          <td class="item-qty">1</td>
          <td class="item-price">$30.17</td>
        </tr>
        
      </tbody>
      
      <tfoot>
        <tr class="text-offset">
          <td colspan="3">SubTotal</td>
          <td>135.36</td>
        </tr>
        <tr class="text-offset">
          <td colspan="3">Tax</td>
          <td>13.54</td>
        </tr>
        <tr class="text-offset">
          <td colspan="3">Total</td>
          <td>148.90</td>
        </tr>
      </tfoot>
    </table>
</body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.2.4/jspdf.plugin.autotable.min.js"></script>
  <script>
    var doc = new jsPDF()
  doc.autoTable({ html: '#my-table' })
  doc.save('table.pdf')
  </script>
</html>

 

Leave a Reply