Hello and welcome to Red Stapler!
In this tutorial, I'm going to show you how
to create a PDF form with jsPDF
first of all you need to design your form image
in jpg format. You can specify the
dimension whatever you like but for this
tutorial, I'm going to use A4 size
Next we are going to convert this image
into base64 format. We can use the
online services to convert it to base64
I will use this converted base64 in the
JavaScript. So let's copy to clipboard for now
Now back to our site. I have a simple
input. Name, Company, Department, Job Title
and a submit button
what we are going to do is when users
click the submit button, we will write a
JavaScript file to pull the values from
the input field and pass to jsPDF
and create a filled form in PDF format
First we are going to create a jsPDF object
Now I'm going to create another variable
to store the base64 format of the image
Now we're going to add the image to our
PDF form using addImage()
I'll put 0 and 0. This will be the
coordinates of the image that will be placed
on the PDF file so 0 and 0 means
we'll place the image on the top left of the
PDF and next will be the size of the
image in millimeters format. These are A4
size in millimeters unit. Next we will
save the PDF form
So now if we hit the submit buttons
we should get the blank form
Okay! It's looks good so the next step will
be try to pull the values from the
input field and place it on this form
You can use a simple jQuery to pull the
data from the input field
and then put the text into the PDF form
You need to try altering the position
to make sure that text is in the right
direction. So now let's put something on
the field and hit the submit buttons
You'll see that the text is a bit small so
I'm going to change the font size a bit
So i'm going to set the font size to 26
and also change the text color to be a
bit gray. Now let's try again
So that's all about this tutorial! I hope
it give you some ideas to start your project
Let me know if you have any questions!
and don't forget to subscribe :)