Generate text file using Java Script Coding

In this tutorial we are going to see how to create file in web using Java Script. User have to enter the text in text and when they click the submit or download button, then the user can download that typed text in a text document.

First we will design the web page by using HTML, We need one Textbox and command button to download the text in textbox.

Sample Screenshots

HTML Coding

File Name:index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>Generating files with Java Script</title>

        
        <link rel="stylesheet" href="assets/css/styles.css" />

        
    </head>

    <body>

        <header>
            <h1>Generating Files with JavaScript</h1>
            </header>

        <form action="./" method="post">
            <textarea></textarea>
            <a href="#" class="blueButton" id="download">Download</a>
        </form>



        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
        <script src="assets/js/jquery.generateFile.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

Now we need to check whether the textbox is empty and we need to name the file while download. Using PHP we can implement this,

PHP Coding

File Name: download.php

if(empty($_POST['filename']) || empty($_POST['content'])){
exit;
}

// Sanitizing the filename:
$filename = preg_replace('/[^a-z0-9\-\_\.]/i','',$_POST['filename']);

// Outputting headers:
header("Cache-Control: ");
header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="'.$filename.'"');

echo $_POST['content'];

JQuery Coding

(function($){

	// Creating a jQuery plugin:

	$.generateFile = function(options){

		options = options || {};

		if(!options.script || !options.filename || !options.content){
			throw new Error("Please enter all the required config options!");
		}

		// Creating a 1 by 1 px invisible iframe:

		var iframe = $('<iframe>',{
			width:1,
			height:1,
			frameborder:0,
			css:{
				display:'none'
			}
		}).appendTo('body');

		var formHTML = '<form action="" method="post">'+
			'<input type="hidden" name="filename" />'+
			'<input type="hidden" name="content" />'+
			'</form>';

		// Giving IE a chance to build the DOM in
		// the iframe with a short timeout:

		setTimeout(function(){

			// The body element of the iframe document:

			var body = (iframe.prop('contentDocument') !== undefined) ?
							iframe.prop('contentDocument').body :
							iframe.prop('document').body;	// IE

			body = $(body);

			// Adding the form to the body:
			body.html(formHTML);

			var form = body.find('form');

			form.attr('action',options.script);
			form.find('input[name=filename]').val(options.filename);
			form.find('input[name=content]').val(options.content);

			// Submitting the form to download.php. This will
			// cause the file download dialog box to appear.

			form.submit();
		},50);
	};

})(jQuery);

assets/script.js

$(document).ready(function(){

    $('#download').click(function(e){

        $.generateFile({

            filename    : 'export.txt',

            content        : $('textarea').val(),

            script        : 'download.php'

        });

        e.preventDefault();

    });

    $('#downloadPage').click(function(e){

        $.generateFile({

            filename    : 'page.html',

            content        : $('html').html(),

            script        : 'download.php'

        });

        e.preventDefault();

    });

});

Download the source file

Micro Codes - "Coding Schools"