jsPDF + Html2Canvas Tutorial to Export HTML5 Form Filled Input Fields in Browser Using Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be exporting html5 form filled input fields in browser using javascript. For this we will be using jspdf and html2canvas library. 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 following code

 

 

index.html

 

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>

<div class="container form" id="form">
    <div class="row title hidden-print">
        <div class="col-sm-6">
            <h1>HTML to PDF</h1>
        </div>
        <div class="col-sm-6 text-right"><a class="btn btn-success" id="exportForm">Export page</a></div>
    </div>
    <div id="first-page">
        <div class="row title">
            <div class="col-sm-12">
                <h2>First Page</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3 form-group"><label>First Name</label><input class="form-control" /></div>
            <div class="col-sm-3 form-group"><label>Last Name</label><input class="form-control" /></div>
            <div class="col-sm-3 form-group"><label>Birthday</label><input class="form-control" /></div>
            <div class="col-sm-3 form-group"><label>Email Address</label><input class="form-control" /></div>
        </div>
        <div class="row hidden-print">
            <div class="col-sm-12 form-group"><label>Bio</label><textarea class="form-control"></textarea></div>
        </div>
    </div>
    <div id="second-page">
        <div class="row title">
            <div class="col-sm-12">
                <h2>Second Page</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3 form-group"><label>First Name</label><input class="form-control" /></div>
            <div class="col-sm-3 form-group"><label>Last Name</label><input class="form-control" /></div>
            <div class="col-sm-3 form-group"><label>Birthday</label><input class="form-control" /></div>
            <div class="col-sm-3 form-group"><label>Email Address</label><input class="form-control" /></div>
        </div>
        <div class="row">
            <div class="col-sm-12 form-group"><label>Bio</label><textarea class="form-control"></textarea></div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

 

 

 

Now make a style.css file and copy paste the following code

 

 

style.css

 

 

body {
     padding: 10px;
}
 * {
     background-color: #fff;
}
 h1 {
     margin-top: 0;
}
 h2 {
     margin-top: 40px;
}
 .form {
     padding: 20px;
}
 .form .title {
     margin-bottom: 60px;
}
 .form .row:nth-child(even) {
     padding-bottom: 20px;
     margin-bottom: 30px;
     border-bottom: #ccc thin solid;
}

 

 

 

Now make a script.js file and copy paste the following code

 

 

script.js

 

 

$('#exportForm').click(function(){
  var pdf = new jsPDF('a', 'mm', 'a4');
  var firstPage;
  var secondPage;
  
  html2canvas($('#first-page'), {
    onrendered: function(canvas) {
      firstPage = canvas.toDataURL('image/jpeg', 1.0);
    }
  });
  
  html2canvas($('#second-page'), {
    onrendered: function(canvas) {
      secondPage = canvas.toDataURL('image/jpeg', 1.0);
    }
  });
  
  
  setTimeout(function(){
    pdf.addImage(firstPage, 'JPEG', 5, 5, 200, 0);
    pdf.addPage();
    pdf.addImage(secondPage, 'JPEG', 5, 5, 200, 0);
    pdf.save("export.pdf");
  }, 150);
});

 

 

 

Screenshot

 

 

 

Leave a Reply