How to Download a File with JavaScript
You can create download links to let your visitors download dynamically generated files from your website or application, using a client side scripting language such as JavaScript. In this tutorial, I will demonstrate how to download files with JS.
You can prepare files for download from your website in a number of ways. For example, you can upload a file (that is to be downloaded by your visitors) to your website and create a download link with HTML that starts the file download when it is clicked. Another option you have is to download a file with PHP, or even create a Zip archive of multiple files.
JavaScript is another alternative, a client-side one, for handling file downloads on your website. In other tutorials, I showed how to dynamically create and download text files with JS. Text files are not the only type of files that you can download with JS though, that's why I will continue with this tutorial and demonstrate how to download other types of files too.
Note that allowing dynamic file downloads will be extremely useful if you have some sort of file generation mechanism on your website or online tool.
Now, let's start and see how it works.
How to Download Files with JavaScript
To keep things simple, we will start with placing a Download link (<a> element) on our HTML page like the following:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>File Download with JavaScript</title>
</head>
<body>
<a href="" id="download">Download</a>
</body>
</html>
Next, we will prepare the file to be downloaded using the Blob() object.
var myfile = new Blob([fileContent], {type: fileType});
We named the Blob object as myFile but you can name it as you wish, just like a variable. The important things are the content of the file (fileContent) and the MIME type of the file (fileType), which we will define later in the examples.
Finally, we attach the prepared file to the href attribute of our Download button and add the download attribute to force the file as a download, like the following:
window.URL = window.URL || window.webkitURL;
document.getElementById('download').setAttribute('href', window.URL.createObjectURL(myFile));
document.getElementById('download').setAttribute('download', fileName);
We used another variable (fileName) to give a name to the downloaded file which we will define in the examples below.
Download Text Files with JS
If we bring everything together, the following is what you need to prepare a text file for download:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Text File Download with JavaScript</title>
</head>
<body>
<a href="" id="download">Download</a>
<script>
var fileName = "readme.txt";
var fileContent = "This file contains ReadMe text.";
var fileType = "text/plain";
var myfile = new Blob([fileContent], {type: fileType});
window.URL = window.URL || window.webkitURL;
document.getElementById('download').setAttribute('href', window.URL.createObjectURL(myFile));
document.getElementById('download').setAttribute('download', fileName);
</script>
</body>
</html>
Download HTML Files with JS
Similarly, you can download HTML files by using correct file names and MIME types as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML File Download with JavaScript</title>
</head>
<body>
<a href="" id="download">Download</a>
<script>
var fileName = "template.html";
var fileContent = "This file contains the HTML code for the template...";
var fileType = "text/html";
var myfile = new Blob([fileContent], {type: fileType});
window.URL = window.URL || window.webkitURL;
document.getElementById('download').setAttribute('href', window.URL.createObjectURL(myFile));
document.getElementById('download').setAttribute('download', fileName);
</script>
</body>
</html>
Download CSS Files with JS
Use the following code to download a CSS file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS File Download with JavaScript</title>
</head>
<body>
<a href="" id="download">Download</a>
<script>
var fileName = "gradient.css";
var fileContent = "This file contains the gradient CSS rules..";
var fileType = "text/css";
var myfile = new Blob([fileContent], {type: fileType});
window.URL = window.URL || window.webkitURL;
document.getElementById('download').setAttribute('href', window.URL.createObjectURL(myFile));
document.getElementById('download').setAttribute('download', fileName);
</script>
</body>
</html>
Download JS Files with JS
In our last example, we demonstrate how to download a JavaScript file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS File Download with JavaScript</title>
</head>
<body>
<a href="" id="download">Download</a>
<script>
var fileName = "script.js";
var fileContent = "This file contains the gradient CSS rules..";
var fileType = "text/javascript";
var myfile = new Blob([fileContent], {type: fileType});
window.URL = window.URL || window.webkitURL;
document.getElementById('download').setAttribute('href', window.URL.createObjectURL(myFile));
document.getElementById('download').setAttribute('download', fileName);
</script>
</body>
</html>
TIP: If you want to allow file download after email submission, you can also do that via JavaScript.
More JavaScript Tips
How to Download a Text File with JavaScript How to Refresh a Web Page with JavaScript JavaScript Copy Text to Clipboard Tutorial Redirect to Another Page with JavaScript JavaScript Cookies: How to Create a Cookie with Javascript How to Get Elements By Name in JavaScript How to Check If File Input is Empty with Javascript
JavaScript Tips