Open In App

How to download File Using JavaScript/jQuery ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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.



Last Updated : 03 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads