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.