How to Create a Text File with JavaScript

If you need to add a feature on your website or web application for allowing your users to create and save text files, you can use a client-side option such as JavaScript. In this tutorial, I will show you how to create a text file with JavaScript with an example.

Handling file operations such as reading files, writing to files, creating or deleting files is not one of the core topics JavaScript as a client-side programming language is intended for; however, it has some capabilities that allow you to work with files to an extent. For example, JS can read the content of text files (with the help of Ajax) and also create new text files.

If you have a website or application where your users need to create and download text files without sending any information to the server, you can add that functionality with JavaScript easily. This not only handles the file creation in a quick manner, but it also reduces your server load and saves bandwidth had it done on the server. Besides, it won't require any use of a server-side programming script.

Using this feature, you can let your users convert a certain section (an article, a report, etc.) on your website to a text file or generate a file from their text input on a form. Let's see how this works in the following example.

I will start with giving a name to our text file.

STEP 1: Assign a File Name

Every file needs a name; therefore, we will assign a name to our text file as the first step. You can simply create a variable for the file name like the following:

var fileName = 'myfile.txt';

We used fileName as the variable name but you can use any variable name you want. Also, you can name your text file as you wish, we used myfile as the file name here. Make sure to make its extension as txt though.

STEP 2: Prepare the File Content

Our next step will be to prepare the content that you want to place into the text file. Naturally, this content needs to be text. There a number of ways you can specify the content for your text file. For example, you can pre-define it like follows:

var fileContent = 'My file content...';

We declared a new variable as fileContent (again, you can name it as you wish) and assigned the content of the file to it. You can put anything into your file as long as it is text and as long as you don't break the file content variable declaration in your JS file.

TIP: While creating a variable with a long string of text in JavaScript, pay attention to quotes, double quotes, new lines and other things that may break the variable declaration and escape them (with \ for quotes or \n\ for new lines) where necessary.

Another way to prepare your file content is to get it from an HTML element (e.g. a section or paragraph) on your page. Let's say you have a paragraph on your page with an ID of note, here is the code to get its content:

var fileContent = document.getElementById('note').innerHTML;

You can also get the user input and assign it as the file content as shown below:

var fileContent = document.getElementById('input-field').value;

It is up to how you specify the file content; we will be using the user input example for the rest of this tutorial.

Now that our file name and content are ready, we can continue with creating the file.

STEP 3: Create the Text File

Using the page content we specified above, we will create our text file using the Blob() constructor and create a Blob object that consists of the file content as raw data. Blob() is a relatively new feature and it is supported by most modern web browser. You can check this page to see the browser support for it.

The following is how to create a text file using Blob():

var fileName = 'myfile.txt';
var fileContent = 'My file content...';
var myFile = new Blob([fileContent], {type: 'text/plain'});

You can name your file variable as you wish. Note that we used text/plain MIME type for our file since it is a plain text file.

TIP: You can find a complete list of file MIME types here.

We didn't make use of the file name variable yet, as we will use it in the next part of this tutorial, where we will continue talking about how to download the created text file, again with JavaScript.

Continue with the next part:

How to Download a Text File with JavaScript

Was this post helpful?

If you found this post to be helpful, please share it! Thank you :)

f t g+ in