How to download File Using JavaScript/jQuery ?

Difficulty Level : Hard
Last Updated : 25 Oct, 2020

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=
"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </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:

My Personal Notes

Related Articles

html

html