How to Download a Text File with JavaScript
You can prepare a text file for download after it is created using JavaScript and in this tutorial I will demonstrate how to do that by providing a simple example.
This tutorial will explain how to download a text file after dynamically creating it with JS. If you want to learn how to download a text file that is already stored on your server, please check this tutorial.
In another tutorial, I talked about how to create a text file with JavaScript, where we used the Blob() constructor for creating a Blob object that held the data corresponding to a .txt file. The file that we created was not saved or downloaded to anywhere (e.g., to server or to user's device) since it requires further user action in order to be saved.
Let's first remember the JS file creation code that we have up to now:
var fileName = 'myfile.txt';
var fileContent = 'My file content...';
var myFile = new Blob([fileContent], {type: 'text/plain'});
As you can see, the file name, file content and the file object are all ready. The only thing left is to download (or save in other words) this file to the user's device. Due to security practices of web browsers, you can't start a file download with JavaScript without an action that is initiated by the user on your web page, such as a button click or a tap. Hence, we will assign the created file object to a link on our page.
STEP 1: Create a Link for File Download
Firstly, we add a link to our page like the following:
<a href="" id="download">Download</a>
Note that we left the href attribute of the link empty and gave an id (download) to the link that we will be using later. You can give any id as you want.
STEP 2: Prepare the window.URL Property
In order to attach our generated text file to the download link, we need to use the window.URL property, which is used for creating and managing object URLs. We will use the following line to account for webkit browsers too.
window.URL = window.URL || window.webkitURL;
I have come across some developer discussions that claim that webkitURL is now deprecated in the recent versions of webkit browsers. I couldn't find an official source for that information but in case you don't need to support older webkit browsers, you can simply omit the above line from your code.
STEP 3: Prepare the File for Download Using createObjectURL() Method
Finally, using the Blob object, which contains the file content, we will prepare our text file for download with the help of the createObjectURL() static method.
The following line will attach the file content to the download link URL as a Blob object.
document.getElementById('download').setAttribute('href', window.URL.createObjectURL(myFile));
To force the download link to download the file and not open in a new browser tab, we add the download attribute like the following:
document.getElementById('download').setAttribute('download', fileName);
To sum up, our final code for creating a text file and preparing it for download using JavaScript will be as follows:
<!doctype html>
<html>
<head>
<title>JavaScript Text File Download Demo</title>
</head>
<body>
<a href="" id="download">Download</a>
<script>
var fileName = 'myfile.txt';
var fileContent = 'Page content...';
var myFile = new Blob([fileContent], {type: 'text/plain'});
window.URL = window.URL || window.webkitURL;
document.getElementById('download').setAttribute('href', window.URL.createObjectURL(myFile));
document.getElementById('download').setAttribute('download', fileName);
</script>
</body>
</html>
You can see the current browser support for createObjectURL() here.
More JavaScript Tips
Redirect to Another Page with JavaScript How to Download a File with JavaScript How to Get Elements By Name in JavaScript How to Refresh a Web Page with JavaScript JavaScript Copy Text to Clipboard Tutorial JavaScript Cookies: How to Create a Cookie with Javascript How to Check If File Input is Empty with Javascript
JavaScript Tips