Hangvirus Search

Loading




Generate Files using Jquery and PHP




When building a web application, you oftentimes need to give users the ability to download a piece of data as a file. It could be a backup of configuration settings, reports, or other piece of information that is generated dynamically.

The usual solution to this problem would be to have a dedicated export script that selects from a database and builds the file you need. However, as we will be proving in this short tutorial, there is another way.

We will make a jQuery plugin which, combined with a simple php script, can generate every kind of textual file, and make it available for download. You          


will initiate the download from your JavaScript front end by only providing the file contents, and leave the rest to the plugin.
The Tutorial is from Crunch Labs - Wallhood & Hangvirus Production Labs.


Join and Subscribe Crunch Labs and Enjoy the new social network - Wallhood.

The HTML

We shall start by laying down a simple HTML page with a textarea and a download button, so we can demonstrate the plugin at work.

index.html

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

        <title>Generating files with JS &amp; PHP | Crunch Labs Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <header>
            <h1>Generating Files with JavaScript</h1>
            <h2><a href="http://www.crunch.wallhood.com/2011/05/29/generate-files-using-jquery-and-php">&laquo; Read and download on Crunch Labs</a></h2>
        </header>

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

        <footer>Another cool example: <a href="#" id="downloadPage">download this page.</a> <b>To download the source code, visit <a href="http://www.crunch.wallhood.com/2011/05/29/generate-files-using-jquery-and-php">Crunch Labs</a></b></footer>

        <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>
The page uses the HTML5 doctype, as we are using some of the tags defined by the standard. For it to work in IE, we also need to include the HTML5 enabling script in the head section.

Before the closing body tag, we are adding the jQuery library, the generateFile plugin we will be writing in a moment, and the script.js file that listens for events and triggers the file downloads.

Generating Files with jQuery and PHP
Generating Files with jQuery and PHP

The PHP

As you probably know, generating files is not possible with JavaScript alone. Different solutions exist (some of them even relying on Flash), but using a generic PHP script on the backend provides better control and ease of use (not to mention that it works in every major browser out there).

You can see the generic file generation script below:

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'];
What this PHP script does is simply add some headers on top of an echo statement. The plugin we are building must pass two parameters along with the POST request: filename and content. The script will print the content of the file, while setting three headers that will force the file download box to appear (instead of your browser simply opening it).

To use the plugin you need to upload this file somewhere on your server and pass its URL to the plugin we will be coding next.

The jQuery

As you saw in the previous section, our plugin has to issue a POST request to download.php. The natural choice for making a request would be by using AJAX. However, there is a shortcoming to using this method – it does not trigger the file download dialog to appear.

So what we need is a bit more old school. We will be dynamically creating a hidden iframe and write a form to it, which we will later submit via POST. The action attribute of the form points to download.php, so the file download dialog will pop up, exactly as we need it to.

Now lets lay down the jQuery code that does this:

assets/jquery.generateFile.js

(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);
In less than 50 lines (with comments stripped) the above fragment does what we need. It creates a hidden iframe with a form inside it.

Notice the setTimeout() function. Without it we cannot access the document element of the iframe in Internet Explorer. This way, we are giving it time to build the DOM and make it available to us.

And here is how to use this plugin:

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();
 });

});
When calling $.generateFile, you need to pass the name of the file (should be something descriptive), its text content, and the path to download.php. As you can see in the example above, we can generate any kind of file, as long as it is text.

With this our simple plugin is complete!

Conclusion

You can use this code to add export features to your web app or enhance certain areas of your site with download functionality. It is even possible to generate doc files and spreadsheets if you follow Microsoft Office’s XML formats. The best part is that everything is done with JavaScript and you can easily combine different sources of data.


1 comments to "Generate Files using Jquery and PHP"

Post a Comment

Ads -

About This Blog

Hangvirus
the blog is here to update the various aspects and the new touch to the virgin horizons of the human developed technology. it is a technology blog providing tips and tricks of computers, updates about gadgets, new games, tutorials and all that a rookie computer man would expect

Publicise


Backlinks

Socializer

Subscribe in a reader
Subscribe via E-mail :

Enter your email address:

IndiBlogger - The Indian Blogger Community
Subscribe Us via SMS in INDIA
sms - ' ON hangvirus ' to 9870807070

Software Engineering

Google Groups
Subscribe to software-engineering2010
Email:
Visit this group

Followers

Join This Blog



Labels

There was an error in this gadget

Recent Posts