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.