How to download File Using JavaScript/jQuery ?

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.

How to download File Using JavaScript/jQuery ?

spyviku

Improve

Article Tags :

Similar Reads

How to Download a File Using Node.js?

Downloading files from the internet is a common task in many Node.js applications, whether it's fetching images, videos, documents, or any other type of file. In this article, we'll explore various methods for downloading files using Node.js, ranging from built-in modules to external libraries.Using

How to download File in Selenium Using java

Automating the file download process is essential in web automation testing, especially for validating functionalities involving document downloads such as PDFs, images, or CSV files. However, Selenium WebDriver doesnâ€™t directly handle file downloads. To overcome this limitation, we can configure th

How to Download PDF File on Button Click using JavaScript ?

Sometimes, a web page may contain PDF files that can be downloaded by the users for further use. Allowing users to download the PDF files can be accomplished using JavaScript. The below methods can be used to accomplish this task. Table of Content Using html2pdf.js libraryUsing pdfmake LibraryUsing

How to read a local text file using JavaScript?

Reading a local text file involves accessing the contents of a file stored on a user's device. Using JavaScript, this can be achieved with the HTML5 File API and the FileReader object, which reads files selected through an <input> element or drag-and-drop, asynchronously. Getting Started with

How to Download a File using Express.js ?

Express.js is a routing and middleware framework for handling the different routing of the webpage and it works between the request and response cycle and works on the top of the node.js server. In this article, we will discuss how to download a file using express.js.ApproachTo download a file using

Download Any File From URL with Vanilla JavaScript

Downloading files from a URL using vanilla JavaScript involves creating a link element, setting its href attribute to the file URL, and programmatically triggering a click event. This method allows users to download files without relying on external libraries or frameworks. Downloading files from a

Download file from URL using PHP

In this article, we will see how to download & save the file from the URL in PHP, & will also understand the different ways to implement it through the examples. Below are the approaches to download file from URL using PHP:Table of ContentUsing file_get_contents() functionUsing PHP CurlUsing

How to load external HTML file using jQuery ?

In this article, we will learn how to load an external HTML file into a div element. The following jQuery functions are used in the example codes. ready(): The ready event occurs when the DOM (document object model) has been loaded.load(): The load() method loads data from a server and gets the retu

How to create a File Input using jQuery Mobile ?

jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a File Input Area using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheetâ€ hr

How to create and download CSV file in JavaScript ?

CSV (Comma-Separated Values) files are widely used for data transfer, analytics, and storage purposes. They allow you to easily fetch data from JavaScript or JSON objects and save it in a readable format for users, machine learning, or analytics tasks. In this article, weâ€™ll explore how to convert d