Example 1: Using Vanilla JS and <button> tag
For this example, the script part would be written in normal JavaScript, and a button press would cause the client’s machine to download the intended file.
Step 1: Set up the HTML Document
Start by creating a new HTML document named “home”, and then add the following lines inside that HTML document:
<p>Click the button below to download the file!</p>
<button onclick="downloadFile()">Download File</button>
</center>
Adding the above lines within the <body> tag of the HTML element would result in the following outcome inside the browser:
From the lines that have been added into the HTML document, it can be easily noticed that the “onclick” property of the button has been set to the function “downloadFile()”. Let’s create that function in the next step
Step 2: JavaScript Part
Either within the script tag or in the linked JavaScript file, add the following lines of code to add the functionality to the button:
function downloadFile() {
window.location.href = "Demo.docx";
}
</script>
Here, the window.location.href property has been set to the path of the file that is to be downloaded by the client’s machine. Since only the name of the file has been used as the path to the file, this means that the file is placed inside the same folder as the HTML document:
Anyhow, this would cause the browser to download the file.
Step 3: Testing
At the end, fire up the HTML document and click on the button and observe that the browser will instantly start downloading the file like:
As it is clear from the gif above that the whole webpage is working perfectly as intended.
Example 2: Using jQuery and <a> tag
For this example, the script part would be written in jQuery, and a <a> tag link would cause the browser to start the download of the intended file.
Step 1: Set up the HTML Document
Just like the first example, create a new HTML document named “home” and then add in the following lines inside that HTML document:
<p>Click the button below to download the file!</p>
<a id="download" href="#">Click Here!</a>
</center>
Now, in this example, an <a> tag with the id “download” is being used instead of a button. Running this HTML document will yield the following results on the webpage:
Next up is to add some jQuery to download the file every time the link is clicked.
Step 2: jQuery Code
In the script tag or in the script file, add the following lines:
$("#download").click(function (e) {
e.preventDefault();
window.location.href = "Demo.docx";
});
});
In the above lines:
- A function is being called once the document is fully ready
- Within that function, a constant check has been applied on the element with the id “download” which is actually the <a> tag and the check is of a “click” event
- After that, simply access the location.href attribute to the file path.
Step 3: Testing
Fire up the HTML document and click the link and observe the result response to be like this:
The clickable link is causing the client’s machine to download the intended file using jQuery
Wrap up
To use JavaScript or jQuery to cause the client’s machine to download a specific file, simply access the href attribute of the window object’s location property and set it equal to the complete path of the file on the server. By using this way, it is easy to create a button that will cause the file to be downloaded. And also, a clickable link to cause the file to download. Anyhow, the procedure has been explained thoroughly in the above examples.
