HTML to PDF Conversion easiest way using JavaScript

Lets Do HTML to PDF Conversion

Hello everyone,  in this tutorial we are going to learn how to make an HTML to PDF converter.  Basically, we use HTML to pdf convert method to create invoices or documents on our website or web application. in my case, I develop lots of business purpose web applications so HTML to pdf conversion is one of the must thing.
In this tutorial, we are going to convert a div to PDF using JavaScript.

Start Making our HTML to PDF Conversion

here we are using 3 javascript plugins to do that

  1. html2pdf
  2. html2canvas
  3. jspdf

Don’t worry. i uploaded all the scripts i used. you can click the download button and get all files. you don’t need to wait for copy and paste my code from this blog. you can simple download the script you can find the download link the bottom of this page. and extract to your PC and test it.

also if any of the script were outdated please let me know. i will make a fix for that.

html to pdf
html to pdf

Here you can see the basic example how its works.

So here is the code :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML TO PDF</title>
    <script src="js/jquery.min.js"></script>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <link href="css/style.css" rel="stylesheet" >
</head>
<body>



<div id="invoice">
    <header >
      <h1>Invoice</h1>
      <address >
        <p> [email protected] </p>
        <p> 45189, Research Place, Suite 150A </p>
        <p> P: 1-800-961-4952 </p>
        <p> Business Number: 0-808-234-2380 </p>
      </address>
      <span><!--<img alt="it" src="base64imagecodehere" width="150">--></span>
    </header>
    <article>
    
      <address class="norm">
        <h4>Jan Denean Banister</h4>
        <p> [email protected] <br>
        <p> 1613 bethany church road,belton,South <br>
        <p> Carolina,29627,USA <br>
        <p> Phone: 1-864-933-0793</p>
      </address>
      
      <table class="meta">
        <tr>
          <th><span >Invoice #</span></th>
          <td><span >101138</span></td>
        </tr>
        <tr>
          <th><span >Date</span></th>
          <td><span >January 1, 2019</span></td>
        </tr>
        <tr>
          <th><span >Amount Due</span></th>
          <td><span id="prefix" >$</span><span>600.00</span></td>
        </tr>
      </table>
      <table class="inventory">
        <thead>
          <tr>
            <th><span >S. No</span></th>
            <th><span >Description</span></th>
            <th><span >Qty</span></th>
            <th><span >Rate Per Qty</span></th>
            <th><span >Amount</span></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><span >1.</span></td>
            <td><span >Experience Review</span></td>
            <td><span data-prefix>$</span><span >150.00</span></td>
            <td><span >4</span></td>
            <td><span data-prefix>$</span><span>600.00</span></td>
          </tr>
        </tbody>
      </table>
      <table class="sign">
        <tr>
          <td></td>
        </tr>
      </table>

      <table class="balance">
        <tr>
          <th><span >Total</span></th>
          <td><span data-prefix>$</span><span>600.00</span></td>
        </tr>
      </table>
    </article>
    <aside>
      <h1><span >Additional Notes</span></h1>
      <div >
        <p>We offer limited 10 days refund policy and 30 days workmanship warranty on all of our services. For more details, please read our refund policy below.</p>
      </div>
    </aside>

</div>




  <a  href="javascript:void(0)" class="btn-download">Download PDF  </a>



<script src="js/jspdf.debug.js"></script>
<script src="js/html2canvas.min.js"></script>
<script src="js/html2pdf.min.js"></script>


<script>

    const options = {
      margin: 0.5,
      filename: 'invoice.pdf',
      image: { 
        type: 'jpeg', 
        quality: 500
      },
      html2canvas: { 
        scale: 1 
      },
      jsPDF: { 
        unit: 'in', 
        format: 'letter', 
        orientation: 'portrait' 
      }
    }
    
    $('.btn-download').click(function(e){
      e.preventDefault();
      const element = document.getElementById('invoice');
      html2pdf().from(element).set(options).save();
    });

   
    </script>



</body>
</html>

Some Explanations
here you can see the div id = invoice is converting as PDF. so only the part inside of invoice div is converted as pdf

<script>

    const options = {
      margin: 0.5,
      filename: 'invoice.pdf',    //name the output file
      image: { 
        type: 'jpeg',     //image type
        quality: 100
      },
      html2canvas: { 
        scale: 1 
      },
      jsPDF: { 
        unit: 'in', 
        format: 'letter', 
        orientation: 'portrait'   // pdf orientation
      }
    }
    
    $('.btn-download').click(function(e){     // class for download button
      e.preventDefault();
      const element = document.getElementById('invoice');   //id for content area
      html2pdf().from(element).set(options).save();
    });


  
    </script>

Adding images to pdf:

Normally jspdf doesn’t support image objects , so we have to add the base64 image data code inside <img src=”data:base64image code”> tag
to convert an image to base64 . go to this website https://www.base64-image.de/ 

you can find the details in the video ..

Download Source Code : 

html to pdf

Post Your Questions on our forum

Post a question on Forum

Ajith Jojo Joseph

Self taught, dedicated young entrepreneur with many licensed products under his sleeve. Passionate about technology, business and excellence in general.

Share with your friends:

Comments are closed.

HTML to React JS Basic Functions

Hey, this blog post was specifically written for the viewers of my youtube video. please check the video to get […]

24 February, 2022

HTML Form to Email Using JavaScript and SMTP server 🚀

Hello Everyone, 🙋‍♂️ In this tutorial, we are going to look at how to send emails from HTML Form to […]

22 September, 2021

Submit Form Without Refreshing Page PHP and Javascript

Hello Everyone, In this tutorial, we are going to learn, How to submit a form without reloading. yeah, that’s so […]

18 September, 2021

HTML to PDF Conversion easiest way using JavaScript

Lets Do HTML to PDF Conversion Hello everyone,  in this tutorial we are going to learn how to make an […]

3 September, 2021

Digital Marketing Toolkit

Get Free Access to Digital Marketing Toolkit. You can use all our tools without any limits

Get Free Access Now