How to download File Using JavaScript/jQuery ?

Last Updated : 22 Apr, 2025

The ability to download files directly from a website is an essential feature for many web applications. Whether you're providing documents, images, or other data, enabling users to download files seamlessly enhances their experience and ensures they can access the content offline. This article provides a comprehensive guide on how to implement file downloads using JavaScript and jQuery, complete with a detailed folder structure to help you locate and manage your files efficiently.

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:

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 Examples.