Convert HTML to PDF & Download Using jQuery Plugin – JSPDF

by Posted on

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/jspdf@latest/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.


Published by admin