Skip to content

Coding Shiksha

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

jsPDF Tutorial to Save PDF Document With Custom Filename & Download as Attachment in Javascript

Posted on October 29, 2022

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

 

 

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

 

 

 

 

 

Leave a Reply Cancel reply

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

©2023 Coding Shiksha | Design: Newspaperly WordPress Theme