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 of the file that will be downloaded.
Example:Ā
html
<!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 Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā "neveropen.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="neveropen.png" download="GFG">Ā Ā Ā Ā Ā Ā Ā Ā Ā <button type="button">Download</button>Ā Ā Ā Ā Ā Ā Ā Ā Ā </a>Ā Ā Ā </body></html> |
Output:Ā
Approach 2: Using a custom javascript functionĀ
- first made a textarea where all the text input will be issued.
- make an anchor tag using the createElement property and then assign 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
<!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 neveropenĀ Ā Ā Ā Ā Ā Ā Ā Ā </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> |
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
<!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"> Ā Ā Ā Ā Ā Ā Ā Ā Ā neveropen Ā Ā Ā Ā Ā Ā </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> |
Output:Ā
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.
