Open In App

How to Trigger a File Download when Clicking an HTML Button or JavaScript?

Last Updated : 20 Sep, 2024
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

Triggering file downloads in JavaScript refers to initiating the download of files directly from a webpage when a user clicks a button or link. This can be achieved using HTML5's download attribute or custom JavaScript functions, allowing dynamic and user-friendly file-downloading experiences.

To trigger a file download on a button click we will use a custom function or HTML 5 download attribute.

Table of Content

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 of the file that will be downloaded.

Example: In this example

  • The download attribute on the <a> tag prompts a download when the link is clicked.
  • download="GFG" specifies the default filename for the downloaded file.
  • Button: The button inside the <a> tag triggers the download when clicked.
html 
<!DOCTYPE html>
<html>

<head>
    <title>Using Download attribute </title>
    <style>
        p {
            color: green;
        }
    </style>
</head>

<body>

    <p>
        How to trigger a file download when
        clicking an HTML button or JavaScript?
    </p>
    <a href="geeksforgeeks.png" download="GFG">
        <button type="button">Download</button>
    </a>
</body>

</html>

Output:

file
Using Download attribute  Example Output

Using a custom javascript function 

First create a textarea to capture user input, where the text content is intended for the downloadable file Now :

  • Dynamically generate an anchor (<a>) tag using JavaScript's createElement property, setting attributes like download and href for file download.
  • Use encodeURIComponent to encode special characters in the text content, ensuring proper formatting in the URI.
  • Simulate a click event on the anchor element using the click() method to initiate the file download, triggered by a button click or another user action.

Example: In this example, we will see the implementation of the above approach with an example.

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        Using a custom javascript function 
    </title>
    <style>
        p {
            color: green;
        }
    </style>
</head>

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

            let element = document.createElement('a');
            element.setAttribute('href',
                'data:text/plain;charset=utf-8, '
                + encodeURIComponent(text));
            element.setAttribute('download', file);
            document.body.appendChild(element);
            element.click();

            document.body.removeChild(element);
        }

        // Start file download.

        document.getElementById("btn")
            .addEventListener("click", function () {
                let text =
                    document.getElementById("text").value;
                let filename = "GFG.txt";

                download(filename, text);
            }, false);
    </script>
</body>

</html>

Output: 

ax
Using a custom javascript function 

Using a custom javascript function with Axios Library

Utilize a custom JavaScript function integrated with the Axios library to make asynchronous HTTP requests, facilitating efficient handling of data from external APIs. Axios simplifies AJAX calls, providing promise-based approach for handling responses in web applications.

Example: In this example, we will see the implementation of the above approach with an example.

html 
<!DOCTYPE html>
<html>

<head>
    <title>Download Images using Axios</title>
    <style>
        .scroll {
            height: 1000px;
            background-color: white;
        }
    </style>
</head>

<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <button onclick="downloadImage()">
      Download Image
    </button>
    <p class="scroll">
        By clicking the download button, 
        a random image will be generated.
    </p>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js">
    </script>
    <script>
        function downloadImage() {
            axios({
                url: 'https://picsum.photos/500/500',
                method: 'GET',
                responseType: 'blob'
            })
                .then((response) => {
                    if (response.status === 200) {
                        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();
                        document.body.removeChild(link);
                        window.URL.revokeObjectURL(url);
                    } else {
                        console.error('Error: Received non-200 status code');
                    }
                })
                .catch((error) => {
                    console.error('Error downloading the image:', error);
                });
        }
    </script>
</body>

</html>

Output: 

triggered

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.


A
abhishek7
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox