jsPDF html2canvas.js Tutorial to Export HTML Table to PDF Document in Browser Using Semantic UI CSS Framework in Javascript Full Project For Beginners

jsPDF html2canvas.js Tutorial to Export HTML Table to PDF Document in Browser Using Semantic UI CSS Framework in Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be exporting html table to pdf document in browser using jspdf and html2canvas.js library in javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the below code

 

index.html

 

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>HTML to PDF - techumber</title>
 <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css">
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="ui page grid">
  <div class="wide column">
   <h1 class="ui header aligned center">HTML to PDF</h1>
   <div class="ui divider hidden"></div>
  </div>
 </div>
 
  
  <div class="ui segment">
 <div class="ui button aligned center teal" id="create_pdf">Create PDF</div>
 <div class="ui divider"></div>
 <form class="ui form">
  <table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</form>
</div>
</body>
  <!-- scripts -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script> 
<script type="text/javascript" src="//cdn.rawgit.com/niklasvh/html2canvas/0.5.0-alpha2/dist/html2canvas.min.js"></script>
<script src="script.js"></script>
</html>

 

READ  Vex Javascript Library For Beautiful Dialog Alert Boxes Full Crash Course with Examples

 

And now make a style.css file and copy paste the below code

 

style.css

 

.hello {
    background-color: #a12312 !important;
  }
  table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
  }
  
  td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
  }
  
  tr:nth-child(even) {
      background-color: #dddddd;
  }

 

 

Now make a script.js file inside the root directory and copy paste the below code

 

script.js

 

(function(){
    var 
     form = $('.form'),
     cache_width = form.width(),
     a4  =[ 595.28,  841.89];  // for a4 size paper width and height
     
    $('#create_pdf').on('click',function(){
     $('body').scrollTop(0);
     createPDF();
    });
    //create pdf
    function createPDF(){
     // getCanvas().then(function(canvas){
      var 
      // img = canvas.toDataURL("image/png"),
      doc = new jsPDF();     
            // doc.addImage(img, 'JPEG', 20, 20);
            // doc.save('test.pdf');
            // form.width(cache_width);
       doc.fromHTML($('.form').get(0), 15, 15, {
        'width': 800
    });
      doc.save('test.pdf');
    
     // });
    }
     
    // create canvas object
    function getCanvas(){
     form.width((a4[0]*1.33333) -80).css('max-width','none');
     return html2canvas(form,{
         imageTimeout:2000,
         removeContainer:false
        }); 
    }
     
    }());

 

 

And now if you open index.html file inside the browser you will see the below screenshot

 

READ  Node.js Express Paytm Payment Gateway Integration Full Tutorial with Source Code 2020

 

 

Leave a Reply