Users can use HTML with JavaScript and jQuery to download a file when someone clicks the link. Using JavaScript, users can easily make a file and download it upon pressing the button or pressing the <a> tag link.
For doing this users only need to use the "location.href" property of the "window" object. This article is the best for users because it provides the different ways to the solution and explains how to download files using JavaScript/jQuery.
What is an HTML file path?
A file path defines a location of an HTML file within the web folder format. Users can represent it like an address of a file that allows the web browser to access that file.
HTML users use these file paths to merge external resources such as videos, images, PDF files, JavaScript, style sheets, displaying different web pages, etc. Users need to set the location equal to the path of the desired file on the server, which the browser will download on the user's machine.
Let us understand how it works by using the following code snippets:
There are two methods to download files using JavaScript/jQuery. These are:
Method 1: Using Vanilla JS and <button> tag:
For the first example, users will write the script part of the code in normal JavaScript. Then they add a <button> tag, which creates a button in the browser. After clicking the download button, the browser will download the file.
Code Snippet:
<html>
<head>
<title>Download File Using JavaScript</title>
</head>
<body>
<center>
<p>You have to click the below-given button to download the file! </p>
<button onclick = "demo()" > Download my file </button>
</center>
<script>
function demo() {
window.location.href = "example.pdf";
}
</script>
</body>
</html>
Output:
Explanation:
Here, in the above example, the HTML part starts with the <head> and the <title> tags. Then, we used the <body> tag and inside the <body> tag, we used the <center> tag.
The <center> tag defines the action of our <button> tag that we used. Then, users can add the following lines of code either inside the HTML <script> tag or in the associated JavaScript file to add the functionality to the HTML <button> tag.
Method 2: Using the <a> tag with jQuery to download a file:
The second method involves the HTML anchor tag. Users have to write the jQuery part inside the inside <script> tag, and the anchor tag link would compel the browser to start downloading the desired file.
In HTML, users can create paths to open a hyperlink to another page with the anchor element <a> tag. Also, as we have discussed in the above sections of this article, users can add the "_blank" value to the target attribute of the <a> tag to open a link in the new tab.
Web developers have other options to use with the anchor tag, i.e., they can use the href property to provide the URL of the page they want any user to prompt.
Code Snippet:
<html>
<head>
<title>Download File Using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<h1>Download File Using jQuery</h1>
<h3>For Downloading, Click on the below link.</h3>
<a id="link" href="no-script.html">Download this file</a>
<script>
$('a').click(function(e) {
var url = "example.pdf";
e.preventDefault();
window.location.href = url;
});
</script>
</body>
</html>
Output:
Explanation:
Here, in the above example, the HTML part starts with the <head> and the <title> tags. Then, we used the <body> tag and inside the <body> tag. Now, in this code snippet, we used the HTML <a> tag with the id attribute, and in the attribute, we added "download" instead of a button.
Then, users can add the following lines of code either inside the HTML <script> tag or in the associated JavaScript file to add the functionality to the HTML <button> tag.
Let us see another example and download a file using HTML, JavaScript/jQuery:
<html>
<head>
<title>Download File Using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<h1>Download File Using jQuery</h1>
<h3>For Downloading, Click on the below link.</h3>
<a id = "link" href = "no-script.html" >Click here to download</a>
<script>
$(document).ready(function () {
$('a#link').attr({target: '_blank', href: 'example.pdf'});
});
</script>
</body>
</html>
Output:
Conclusion:
Wrapping up to the conclusion of this article, we have discussed two methods to download a file. One is how users only need to access the href attribute of the window object's location property and fix it equal to the entire path of any file on the server to use JavaScript or jQuery to render the client-side server to download the particular file.
Also, users can create a button using the HTML <button> tag, and it is easy to create the browser button, as we have discussed with code snippets. And also, using a clickable link, users can download any file they choose.
This article thoroughly explained all the techniques in the above code snippet, including their explanations.