Convert HTML to PDF & Download Using jQuery Plugin – JSPDF

In this tutorial I am going to share awesome jQuery plugin which help you to download your HTML content as PDF. This Library is quite useful to save reports as PDF format. and because of it is client side library it’s super-fast. Using jsPdf you can quickly Convert HTML element to PDF & Download as pdf file.
About JSPDF
JSPDF is the HTML5 client-side solution for generating PDFs. This is perfect for event tickets, reports, and certificates. Just include the JSPDF library in your , generate your PDF using the many built-in functions.

Libraries

Include following libraries on page.

<script   src="https://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/jspdf.min.js"></script>

HTML

Here is the sample html you can also convert images to pdf but you need to pass images as base64 format.

<button id="download">DOWNLOAD AS PDF</button>
<div id="pdf" style="background-color: white;">
<h1>Rohit Kumar</h1>
<b>iamrohit.in</b><br/>
 
<img src="data:image/jpeg;base64,imagesource" />
<h4>Hello, I hope you are doing well, My name is Rohit Kumar and I am Programmer, Analyst, Blogger and Technology freak based in New Delhi, India.</h4>
</div>

JS

Finally initialize the plugin and send your html to convert to pdf and download.

$(function() { 
 $('#download').click(function() {
  var options = {
  };
  var pdf = new jsPDF('p', 'pt', 'a4');
  pdf.addHTML($("#pdf"), 15, 15, options, function() {
    pdf.save('iamrohit.in.pdf');
  });
 });
});

The JSPDF library has lot’s of inbuilt methods you can visit their official documentation and explore.

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


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.