Download File On Button Click In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Ashish
In this article we will show you the solution of download file on button click in JavaScript, as we see many web applications need to download files that’s why we are trying to make it possible for user to download file just by clicking a button.
We'll look at a quick and efficient JavaScript solution to complete this task.
We'll combine HTML, JavaScript, and a little imagination to get file downloads upon button click.
To handle the click event, JavaScript will be used to build an HTML button element.
By generating and clicking a hidden anchor element that is connected to the file that has to be downloaded, the JavaScript code will start the download.
Step By Step Guide On Download File On Button Click In JavaScript :-
<!DOCTYPE html>
<html>
<head>
<title>File Download on Button Click</title>
</head>
<body>
<button id="downloadButton">Download</button>
<script>
function downloadFile() {
const fUrl = 'https://example.com/demo.txt';
const fName = 'demo.txt';
const link = document.createElement('a');
link.href = fUrl;
link.download = fName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
const button = document.getElementById('downloadButton');
button.addEventListener('click', downloadFile);
</script>
</body>
</html>
- For indicating HTML5 document, so that we declare HTML5 doctype (<!DOCTYPE html>) at the start point of the code.
- The HTML element is a part of HTML document from which code begins.
- The <head> element includes title and links to external resources like stylesheets and scripts.
- A <title> element with the wording "File Download on Button Click" is present inside the <head> element. This determines the title of the webpage that displays in the title bar or tab of the browser.
- When we clicked button A button element with the id property set to "downloadButton" can be found inside the body element. The action of downloading the file is started by pressing this button. When the button is clicked to begin the file download, the downloadFile function is invoked.
- A <script> element in HTML designates client-side JavaScript code.
- There is a JavaScript function named downloadFile() contained within the <script> tags. When the button is clicked, this function is in charge of starting the file download.
- The downloadFile function creates two constant variables: In the variable fUrl, the URL of the file that needs to be downloaded is stored. It is set in this instance to "https://example.com/sample_file.txt". The filename of the downloaded file is stored in the variable fName. It is set to 'sample_file.txt' in this illustration.
- Using document, a new <a> (anchor) element is generated programmatically.createElement('a'). Although it doesn't appear on the visible page, this element will be utilised to start the file download.
- The link.href property is set to fUrl, pointing to the file's location on the server.
- The filename of the file to be downloaded is specified by the value of the link.download property, which is set to fName.
- In the body as a child element the <a> element got added using document.body.appendChild(link). This make sure that the given link is present in document.
- The <a> element is promptly deleted from the document using document.body.removeChild(link) when the file download has been initiated. To keep the document tidy and remove any undesirable sections, this elimination is carried out.
- Using button, an event listener is attached to the button."click" and "downloadFile" in addEventListener. When the button is pressed, this event listener watches for the "click" event and calls the downloadFile function.
Conclusion :-
This article has successfully taught us how to use JavaScript to enable file downloads upon button click.
We can dynamically start the download process by creating a button element and attaching a click event listener.
This approach offers a simple, user-friendly solution to enable users to quickly download files from your web application.
Understanding this strategy can help you improve the functionality and user experience of your applications, which are crucial for many web projects.
I hope this article on download file on button click in JavaScript helps you and the steps and method mentioned above are easy to follow and implement
About Ashish
