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.
