How to trigger a file download when clicking an HTML button or JavaScript?

To trigger a file download on a button click we will use a custom function or HTML 5 download attribute.
Approach 1: Using Download attribute 
The download attribute simply uses an anchor tag to prepare the location of the file that needs to be downloaded. The name of the file can be set using the attribute value name, if not provided then the original filename will be used.
Syntax 
 

<a download="filename">

filename: attribute specifies the name for the file that will be downloaded.
Example: 
 

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
   <body>
      <style>
         p {
         color: green;
         }
      </style>
      <p>How to trigger a file download when 
         clicking an HTML button or JavaScript?
      <p>
         <!-- GFG is the name of the 
            file to be downloaded-->
         <!-- In order to run the code, 
            the location of the file 
            "geeksforgeeks.png" needs to 
            be changed to your local directory,
            both the HTML and downloadable file 
            needs to be present in the same directory -->
         <a href="geeksforgeeks.png" download="GFG">
         <button type="button">Download</button>
         </a>
   </body>
</html>

chevron_right


Output: 
 

Approach 2: Using a custom javascript function 
 



  • firstly made a textarea where all the text input will be issued.
  • make an anchor tag using createElement property and then assigning it the download and href attribute.
  • encodeURIComponent will encode everything with special meaning, so you use it for components of URIs. 
    For example, if we have text like “Hello: Geek ?”, there are special characters in this, so encodeURIComponent will encode them and append it for further usage.
  • data:text/plain; charset=utf-8 is the attribute value of href (like href=” “), it specifies that the value must be of type text and with UTF-8 type encoding. The click() method simulates a mouse-click on an element.
  • After that we simply call our download function with the text from textarea and our file name “GFG.txt” as parameters on the input button with id ‘btn’.

Example: 
 

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
   <body>
      <style>
         p {
         color: green;
         }
      </style>
      <p>
          How to trigger a file download when
          clicking an HTML button or JavaScript?
      <p>
         <textarea id="text">
             Welcome to GeeksforGeeks
         </textarea>
         <br/>
         <input type="button" id="btn" 
                value="Download" />
         <script>
            function download(file, text) {
              
                //creating an invisible element
                var element = document.createElement('a');
                element.setAttribute('href', 
                'data:text/plain;charset=utf-8, '
                + encodeURIComponent(text));
                element.setAttribute('download', file);
              
                // Above code is equivalent to
                // <a href="path of file" download="file name">
              
                document.body.appendChild(element);
              
                //onClick property
                element.click();
              
                document.body.removeChild(element);
            }
              
            // Start file download.
            document.getElementById("btn")
            .addEventListener("click", function() {
                // Generate download of hello.txt 
                // file with some content
                var text = document.getElementById("text").value;
                var filename = "GFG.txt";
              
                download(filename, text);
            }, false);
         </script>
   </body>
</html>

chevron_right


Output: 
 

Approach 3: Using a custom javascript function with Axios Library
In this example, we will download images and file using Axios. This requires a little intermediate knowledge of the JavaScript to work and in this example a Axios library will be used.
 

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<!DOCTYPE html>
<html>
   <head>
      <title>Download Images using Axios</title>
      <style
         .scroll { 
         height: 1000px; 
         background-color: white; 
         
      </style>
   </head>
   <body>
      <p id="dest">
      <h1 style="color: green"
         GeeksforGeeks 
      </h1>
      </p
      <button onclick="download()">
          Download Image
      </button>
      <p class="scroll"
         By clicking the download button 
         will generate a random image.
      </p>
   </body>
   <script src=
   </script>
   <script
      function download(){
          axios({
              url:'https://source.unsplash.com/random/500x500',
              method:'GET',
              responseType: 'blob'
      })
      .then((response) => {
             const url = window.URL
             .createObjectURL(new Blob([response.data]));
                    const link = document.createElement('a');
                    link.href = url;
                    link.setAttribute('download', 'image.jpg');
                    document.body.appendChild(link);
                    link.click();
      })
      }
        
   </script>
</html>
</html>

chevron_right



Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : polokghosh53