Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Trigger File Download with HTML Button or JavaScript
To trigger a file download when clicking an HTML button or JavaScript, is a very common and important part of web page where users can directly download the file they want by clicking a button or link. We will be understanding four different approaches to achieve this.
In this article, we are having a button in our HTML document and our task is to trigger a file download when clicking an HTML button or JavaScript.
Approaches to trigger file download
Here is a list of approaches to trigger a file download when clicking an HTML button or JavaScript which we will be discussing in this article with stepwise explanation and complete example codes.
- Using download Attribute
- Using window.open() Method
- Using Custom Javascript Function
- Using Axios Library
Using download Attribute
To trigger a file download when clicking an HTML button or JavaScript, we have used download attribute of anchor tag.
- We have used an anchor tag with href attribute to specify an image link in our HTML document.
- Then, we have used download attribute which downloads the image specified in href attribute with name same as specified in download attribute.
Example
Here is a complete example code implementing above mentioned steps to trigger a file download when clicking an HTML button or JavaScript using download attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Triggering File Download when Clicking
an HTML Button or JavaScript
</title>
</head>
<body>
<h2>
Triggering File Download when Clicking
an HTML Button or JavaScript
</h2>
<p>
In this example we are using <strong>download
</strong>attribute of anchor element to trigger
a file download when clicking an HTML button
or JavaScript.
</p>
<a href="/https/www.tutorialspoint.com/html/images/test.png" download="test_image">
<button type="button">Download</button>
</a>
</body>
</html>
Using window.open() Method
In this approach to trigger a file download when clicking an HTML button or JavaScript, we have used open() method of window object.
- We have used a button that triggers the downloadFile() function.
- Then we have used window.open() method which opens the URL passed as a parameter to open() method in the new tab.
- If the open() method can't open the URL, it triggers the file download.
Example
Here is a complete example code implementing above mentioned steps to trigger a file download when clicking an HTML button or JavaScript using window.open() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Triggering File Download when Clicking an HTML Button
or JavaScript
</title>
</head>
<body>
<h2>
Triggering File Download when Clicking an HTML Button
or JavaScript
</h2>
<p>
In this example we are using <strong>window.open()
</strong> method to trigger a file download when
clicking an HTML button or JavaScript.
</p>
<button type="button" onclick="downloadFile()">
Download
</button>
</body>
<script>
function downloadFile() {
window.open("/html/images/test.png")
}
</script>
</html>
Using Custom Javascript Function
In this approach to trigger a file download when clicking an HTML button or JavaScript, users can create and download text file.
- We have used input tag to create a text box where users input their text and a button that triggers startDownload() function.
- By using getElementById method, we get the text inside textbox. Then we have created an anchor element using createElement() method.
- By using setAttribute() method, we have set the href attribute value of anchor tag and download attribute with file name as text_file.
- Then we have used click() method to trigger a click on the link element. When it invokes the click() method, it starts the download.
- Then we have used appendChild() method to append the anchor element to body. The removeChild() method removes the anchor element from DOM after the download is complete.
Example
Here is a complete example code implementing above mentioned steps to trigger a file download when clicking an HTML button or JavaScript using custom function.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Triggering File Download when Clicking an HTML Button
or JavaScript
</title>
</head>
<body>
<h2>
Triggering File Download when Clicking an HTML Button
or JavaScript
</h2>
<p>
In this example we are using <strong>custom
function </strong> to trigger a file download when
clicking an HTML button or JavaScript.
</p>
<hr>
<input type="text" id="txt" placeholder="Entetr Text..">
<button type="button" onclick="startDownload()">
Download
</button>
<script>
function startDownload() {
let txtInput = document.getElementById('txt').value;
var link = document.createElement('a');
link.setAttribute('href', 'data:text/plain;charset=utf-8,'
+ encodeURIComponent(txtInput));
link.setAttribute('download', "text_file");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>
Using Axios Library
In this approach to trigger a file download when clicking an HTML button or JavaScript, we have used Axios library. We will use axios library to fetch data from URL and after that, we will set that data as a value of the href attribute of anchor tag.
- We have used script tag to include axios library in our HTML document.
- We have set the url of the file and used get() method to specify the request method from server. We have used blob as responseType indicates quest data as binary large object(blob). It can be images, video or documents.
- Then we have used createElement() method to create an anchor element and append the fetched link in the body using anchor tag and download attribute.
Example
Here is a complete example code implementing above mentioned steps to trigger a file download when clicking an HTML button or JavaScript using Axios library.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Triggering File Download when Clicking an HTML Button
or JavaScript
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.1/axios.min.js"></script>
</head>
<body>
<h2>
Triggering File Download when Clicking an HTML Button
or JavaScript
</h2>
<p>
In this example we are using <strong>Axios
library </strong> to trigger a file download when
clicking an HTML button or JavaScript.
</p>
<hr>
<p>
Click the below button to download the file
with custom text.
</p>
<button type="button" onclick="startDownload()">
Download
</button>
</body>
<script>
async function startDownload() {
let result = await axios({
url: '/html/images/test.png',
method: 'GET',
responseType: 'blob'
})
let x = document.createElement('a');
x.href = window.URL.createObjectURL(new Blob([result.data]));
x.setAttribute('download', 'download_image.jpg');
document.body.appendChild(x);
x.click();
}
</script>
</html>
Conclusion
In this article we understood various approaches to trigger a file download when clicking an HTML button or JavaScript such as by using download attribute, window.open() method, custom function and Axios library.
46K+ Views
