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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!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> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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.