Easy Way to Convert an HTML file to PDF for beginners

Easy Way to Convert an HTML file to PDF for beginners

Hello friends, welcome to the codezine blog, today we will show you how can you convert your HTML file or form to pdf fine in the easiest way. So, here are few steps on how can you Convert an HTML file to PDF file easily.

Following steps are as follows:

  1. Build a folder called Html2Pdf[Can choose any folder name]
  2. Make an HTML file called index.html along with CSS & Javascript file in your code ide or editor.
  3. After that make copy the following codes given below.

Index.html

 

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> HTML to PDF</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container form" id="form">
  <div class="row title hidden-print">
    <div class="col-sm-6">
      <center><h1>HTML to PDF</h1></center>
    </div>
    <div class="col-sm-6 text-right"><a class="btn btn-primary" id="exportForm">Export page</a></div>
  </div>
  <div id="first-page">
   
    <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>
<!-- partial -->
  <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>
<script  src="./script.js"></script>

</body>
</html>

Style.css

 

 body {
  padding: 10px;
  font-family: "courier", cursive ;
  font-size: 18px;
}

* {
  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;
}

Script.js

 

 $('#exportForm').click(function(){
  var pdf = new jsPDF('a', 'mm', 'a4');
  var firstPage;
 
  
  html2canvas($('#first-page'), {
    onrendered: function(canvas) {
      firstPage = canvas.toDataURL('image/jpeg', 1.0);
    }
  });
  

  
  
  setTimeout(function(){
    pdf.addImage(firstPage, 'JPEG', 5, 5, 200, 0);
    pdf.addPage();
   
    pdf.save("pdfsample.pdf");
  }, 150);
});

Complete Code:

 

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> HTML to PDF</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
    body {
  padding: 10px;
  font-family: "courier", cursive ;
  font-size: 18px;
}

* {
  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;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container form" id="form">
  <div class="row title hidden-print">
    <div class="col-sm-6">
      <center><h1>HTML to PDF</h1></center>
    </div>
    <div class="col-sm-6 text-right"><a class="btn btn-primary" id="exportForm">Export page</a></div>
  </div>
  <div id="first-page">
   
    <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>
<!-- partial -->
  <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>
<script>
    $('#exportForm').click(function(){
  var pdf = new jsPDF('a', 'mm', 'a4');
  var firstPage;
 
  
  html2canvas($('#first-page'), {
    onrendered: function(canvas) {
      firstPage = canvas.toDataURL('image/jpeg', 1.0);
    }
  });
  

  
  
  setTimeout(function(){
    pdf.addImage(firstPage, 'JPEG', 5, 5, 200, 0);
    pdf.addPage();
   
    pdf.save("pdfsample.pdf");
  }, 150);
});
</script>

</body>
</html>

Note: In this script “<script src=’https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js’>” is the main javascript which allows the file to convert to pdf.

Conclusion:

Try to use a good ide and be careful while you code or copy the following codes. You can change the form with any kind form you want just remember to keep <div id=”first-page”> in its place. Also, don’t forget to share this blog with your friends as it will motivate us to write more good coding blogs for you. Thank You!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.