How to download File Using JavaScript/jQuery ?
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.
.png)
