Skip to content

Coding Shiksha

Menu
  • Home
  • Youtube Channel
  • Online Store
  • Online Tools
  • Donate Us
  • Sitemap
  • Privacy Policy
Menu

jsPDF Tutorial to Insert Dynamic Text With Font Size in PDF Document Using Input Field in Javascript

Posted on October 28, 2022

Welcome folks today in this blog post we will be inserting dynamic text with font size in pdf document using the input field in 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 first of all you need to copy paste the cdn library of jspdf as shown below

 

 

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
</html>

 

 

And after that you need to have the input field where we will be getting the user input of text to export to pdf document in html as shown below

 

 

1
2
3
4
5
<form id="form">
        <input type="text" id="text" required placeholder="Enter the text">
        <input type="number" id="fontsize" value="15"/>
        <button onclick="generatePDF()">Generate PDF</button>
    </form>

 

 

As you can we see we have the html5 form in which we have two input fields in which we have the text field where we will enter the text to insert in the pdf document and then we have the input number field to set the font size of the pdf document. And we have also provided the default font size which is 15 and then we have the button to generate pdf. And we have added onclick event listener where we put the method which is generatePDF() method in javascript.

 

 

 

 

 

And now we will be writing the function which is called generatePDF() method when the button was clicked. So we will be writing this function as shown below

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function generatePDF(){
      
    let text = document.getElementById('text').value
    let fontSize = document.getElementById('fontsize').value
 
    let doc = new jsPDF()
 
    doc.setFontSize(fontSize)
 
    doc.text(text,10,10)
 
    doc.save("output.pdf")
    
   }

 

 

As you can see in this method we are getting all the values from the input fields which is the actual text to be inserted in the pdf document and the font size to be set for the text in pdf document. For setting the font size we are using the setFontSize() method and also for adding the text we are using the text() method in which we are inserting the text at x and y coordinates. And then we will be saving the pdf document using the save() method and inside it we are providing the custom name. Now so now if you open the web app you will see the below pdf file created.

 

 

 

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

©2023 Coding Shiksha | Design: Newspaperly WordPress Theme