HTML to PDF Convertor easiest way using Javascript

Hello everyone,  in this tutorial we are going to learn how to make an HTML to PDF converter.
In this tutorial, we are going to convert a div to PDF using JavaScript.

here we are using 3 javascript plugins to do that

  1. html2pdf
  2. html2canvas
  3. jspdf

Dont worry . i uploaded all the scripts i used. you can click the download button and get all files

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> alexandercross202@gmail.com </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> name@client.com <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 : 

Share with your friends:

Ajith Jojo Joseph

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

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

How to make pretty URL in PHP using .htaccess

Hello Everyone, Here in this tutorial, you will learn How to make a pretty URL in PHP using .htaccess. and […]

18 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 […]

HTML from to Email using SMTP in PHP with Source code

Hello Everyone, In this tutorial, I am going to teach you how to send an email from an HTML form […]

16 September, 2021

Newsletter

Subscribe to our weekly Newsletter and stay tuned.


Free PHP Invoicing Software

Gmax CRM Lite is an Invoicing and project management tool for small businesses, features including client management , invoicing , quotation and project management

Download for free