• Register

In this article we are heading towards an interesting topic that stands for the conversion of HTML to pdf using jquery. We are familiar with this name because jquery is a JavaScript library. Next we will discuss jquery.

What is jquery?

So, as we discussed above jQuery is javaScript library. Now the question is, why is the library used for, we use the library to decrease the weight of back in general life and in programming life as well. By using libraries we can decrease the lines of code.
The major purpose of using jQuery to make javaScript much easier to use on our website. There are lots of tasks in javaScript that are required many lines of code. Jquery wraps them into methods that we can call with a single line of code.

Approach

 

  • Add libraries- jQuery and Js pdf
  • Sample HTML to download 
  • Script to generate and download PDF from HTML

    program

<!DOCTYPE HTML>
<html>
    <head>
        <title>The document</title>
        <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/jspdf/1.2.61/jspdf.min.js"></script>
        <style>
        </style>
    </head>
    <body>
        <form id="smdiv">
            <div id="content">
                <label>Name</label>
                <input type="text" name="name"/>
                <label>Empid</label>
                <input type="text" name="empid"/>
                <label>Age</label>
                <input type="text" name="age"/>
            </div>
        </form>
        <button id="cmd">generate PDF</button>
        
    </body>
</html>
<script>
//I did not read up on formatting as in pdf.text(X1, X2,   <------ not sure of how X1 and X2 are used, you can do that
$('#cmd').click(function () {
var name_val = $('form#smdiv input[name="name"]').val();
var empid_val = $('form#smdiv input[name="empid"]').val();
var age_val = $('form#smdiv input[name="age"]').val();

var pdf = new jsPDF();
pdf.text(5, 5, 'You figure out formatting');
pdf.text(30, 30, 'Name: '+ name_val);
pdf.text(60, 60, 'Emp ID: '+ empid_val);
pdf.text(90, 90, 'Age: '+ age_val);
pdf.save('hello_world.pdf');
});    
</script>

Output

image

Hope this will help.

1,060 points
6 2