How to Trigger a File Download by Clicking a Button in jQuery? | Code snippet #30

Code Snippet #29: The code shows us how to click a input button to invoke a file download in <a> tag using jQuery. 


Since triggering click event on a hyperlink with jQuery may not behave the way you expect it to behave like it behaves with an input button or any other element. This is true especially when you want to trigger the click on a hyperlink (<a href=”>) tag to download file. In this code snippet we will see how to trigger a download from “a” tag using a click on an input button.

Here we will the following things:

  1. Create an input button
  2. Create a hyperlink for downloading the file
  3. Trigger the download by clicking the input button created in the first step.



The above code would get the url and would set the location.href property on the window which in turn would cause the browser to load the requested resource download. This code will let you download a file present in the URL by clicking from a different location. HTML is easy to understand, we have created an input button and an hyperlink containing the link to download the file. There are other methods in jQuery and JavaScript to perform this operation, but this is the easiest method. The code can be customized as per your need like to download the file as soon as the user’s DOM is loaded or by making the hyperlink hidden so that the user doesn’t know there is an hyperlink on the page. Please try the code and let us know if any issues.


Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...