jsPDF Tutorial to Insert JSON Objects Data inside PDF Document in Browser Using Javascript

Welcome folks today in this blog post we will be using the jspdf library to insert json objects data inside the pdf document in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js"></script>
<body>
   
</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

As you can see we are including the cdn of the jspdf library as shown above. Now we need to write the javascript code as shown below

 var employees = [
            { "firstName": "utsav", "lastName": "Maniyar" },
            { "firstName": "heta", "lastName": "yadav" },
            { "firstName": "run", "lastName": "run" }
        ];

        var doc = new jsPDF();
        employees.forEach(function (employee, i) {
            doc.text(50, 10 + (i * 10),
                "First Name: " + employee.firstName +
                " Last Name: " + employee.lastName);
        });
        doc.save('Test.pdf');

var employees = [

{ "firstName": "utsav", "lastName": "Maniyar" },

{ "firstName": "heta", "lastName": "yadav" },

{ "firstName": "run", "lastName": "run" }

];

var doc = new jsPDF();

employees.forEach(function (employee, i) {

doc.text(50, 10 + (i * 10),

"First Name: " + employee.firstName +

" Last Name: " + employee.lastName);

});

doc.save('Test.pdf');

As you can see in the above code we are declaring an array of employees. And then we are declaring a new pdf document and inside that we are inserting the array of employees using the forEach loop and then we are using the text() method and inside it we are passing the x and y coordinates. And then we are saving the pdf document using the save() method.