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
|
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
|
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.
