Skip to content

Coding Shiksha

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

jsPDF Tutorial to Change Default Page Width,Height & Font Size of PDF Document in Javascript

Posted on October 29, 2022

Welcome folks today in this blog post we will be changing the default page width height and font size of pdf document in javascript using jspdf library. 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 below code

 

Now you need to include the jspdf cdn of library as shown below

 

 

1
2
3
4
5
6
7
8
9
10
11
12
<!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>jsPDF Change Page Width & Height & Font Size</title>
</head>
<body>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
</html>

 

 

Now we need to create the html form inside that we will have the three input fields to set the page width, height and font size of the pdf document.

 

 

1
2
3
4
5
6
7
<h1>jsPDF Change Page Width & Height & Font Size</h1>
    <form id="form">
        <input type="number" id="width" value="600" placeholder="Enter Page Width" required/>
        <input type="number" placeholder="Enter page Height" id="height" value="600" required/>
        <input type="number" value="25" id="fontsize" placeholder="Enter Font Size" required>
        <button>Save PDF Document</button>
    </form>

 

 

As you can see we have the html5 form inside that we are attaching the id parameter and then we have three input fields for page width, height and fontsize. We are also attaching the default value for these fields and also attaching the id parameter. And then we have the button to generate the pdf document.

 

 

 

 

Now we need to write the javascript code to generate the pdf document. Here we will be attaching the form submit event listener when we click the button then we need to create the pdf document

 

Now we will be using the jspdf constructor and passing the width and height of the pdf document. And also we will be using the setFontSize() method to set the fontsize of the pdf document

 

 

JavaScript
1
2
let doc = new jsPDF('p', 'mm', [width, height]);
doc.setFontSize(fontsize)

 

 

As you can see we are passing the different measurements sizes and then we are passing the dynamic width and height of the pdf document. And also we are passing the fontSize of the pdf document

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let form = document.getElementById('form')
 
    form.addEventListener('submit',(e) => {
        e.preventDefault()
 
        let width = document.getElementById('width').value
        let height = document.getElementById('height').value
        let fontsize = document.getElementById('fontsize').value
        let doc = new jsPDF('p', 'mm', [width, height]);
        doc.setFontSize(fontsize)
        doc.text("Hello world this is the sample input text",10,10)
 
        doc.save("output.pdf")
        
    })

 

 

As you can see in the above code we are attaching the form event listener in which we are getting the width and height from the input field and then we are getting the fontsize of the pdf document.. And then we are setting the page width, height and fontsize of the pdf document. And then we are inserting the text at x and y coordinates. And then we are saving the pdf document using the custom filename.

 

 

Leave a Reply Cancel reply

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

©2023 Coding Shiksha | Design: Newspaperly WordPress Theme