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

html2pdf
html2canvas
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.

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 :

Published September 3, 2021 | Tags : convert pdf to html, html to pdf, html to pdf api, html to pdf c#, html to pdf converter, html to pdf converter free, html to pdf converter online free, html to pdf free, html to pdf java, html to pdf javascript, html to pdf linux, html to pdf online, html to pdf online converter, html to pdf php, html to pdf python, html to pdf sejda,

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.