Suppose you want to download a file when you click on a link. For downloading the file, we mentioned here to implementation as well as folder structure where you can see the file location.
Approach:
- Create an anchor tag link on the normal HTML page. We want to download a file when we click on an anchor tag link(Download this file).
html
<!DOCTYPE html>
< html >
< head >
< title >
Download File Using
JavaScript/jQuery
</ title >
</ head >
< body >
< h1 >
Download File Using
JavaScript/jQuery
</ h1 >
< a id = "link" href = "#" >
Download this file
</ a >
</ body >
</ html >
|
- Provide with the below JavaScript Code:
$(document).ready(function () {
$("#link").click(function (e) {
e.preventDefault();
window.location.href = "File/randomfile.docx";
});
});
// Note: url= your file path
- Note: Replace the above URL with your file path.
Implementation and Folder structure is as shown below.

Example:
html
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
</ head >
< body >
< h1 >
Download File Using
JavaScript/jQuery
</ h1 >
< h3 >
For Downloading, Click
on the below link.
</ h3 >
< a id = "link" href = "no-script.html" >
Download this file
</ a >
< script >
$(document).ready(function () {
$("#link").click(function (e) {
e.preventDefault();
window.location.href
= "File/randomfile.docx";
});
});
</ script >
</ body >
</ html >
|
Output:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.