Welcome folks today in this blog post we will be saving the pdf document
with custom filename
and download it as attachment 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 inside the root directory and copy paste the below code
First of all we need to include the jspdf
library cdn as shown below
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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 Save PDF with Custom Filename in Javascript</title> </head> <body> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script> </html> |
As you can see we are importing the jspdf
cdn as shown above. Now we need to create the DOM Elements
inside the html as shown below
1 2 3 4 5 6 |
<h1>jsPDF Save PDF with Custom Filename</h1> <form id="form"> <input type="text" id="text" placeholder="Enter the text" required/> <input type="text" placeholder="Enter Filename" id="filename" value="output" required/> <button>Save PDF Document</button> </form> |
As you can see we have the html5 form in which we have the two input fields first one is the input text
and secondly we are having the input field to enter the custom filename of the pdf document. And then we have the button to save the pdf document with that custom filename. And also we are wrapping these input fields using the form element and also we have attached the id
parameter. If you open the html file inside the browser you will see the below result
And now we need to write the javascript code to target the dom elements and attach the event listener to the form as shown below
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 text = document.getElementById('text').value let filename = document.getElementById('filename').value let doc = new jsPDF() doc.text(text,10,10) // save pdf with custom filename doc.save(filename + ".pdf") }) |
As you can see we are first of all targeting the form
element using it’s id. And then we are attaching the event listener to the form element which is the submit event. When the form submits this callback function will execute automatically and also we have the e
parameter. And in this first of all we need to prevent the auto completion of the form using e.preventDefault()
method and then we are getting the text and the custom filename values. And then we are simply inserting the text using the text()
method and then we are saving the pdf document using the save()
method and it will download it as an attachment.