0 Replies - 1481 Views - Last Post: 05 November 2014 - 09:43 AM

#1 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 138
  • View blog
  • Posts: 615
  • Joined: 15-March 14

Download Text via JavaScript from your browser.

Posted 05 November 2014 - 09:43 AM

This month I will just add a simple but very handy snippet of code that I use all the time. To download a file the user is required to click a link. This is a bit of a pain when you have created a browser based application so the following bit of code does the clicking for the user by generating the click event via Javascript.

Tested on Chrome, Firefox, and IE.

The code will work in IE10 and above using the IE element fireEvent method.

Notes.
The MIME type "text/txt" describes both 8 bit and 16 bit text files. The exact format of the downloaded file will be dependent on the content of the text you are downloading. If you use only 8Bit characters (UTF-8) the downloaded file will be 8bits per character. If the text you download contains a UNICode character then the file will be 16bits per character.

I have noticed that at times when I include some (UTF-8) control characters the format will change to 16bit UNICode.

The text file format will depend on the operating system. I have only tested it on windows.

The filename is just the requested filename. Depending on the browser, and the browser settings the filename may or may not be used when saving the file. The file will be saved to the users download directory. If the file already exists the browser will change the filename to make it unique to the download directory. The extension (or lack of one) will be maintained so you can download any type you wish (eg .ini, .hex) but the file will maintain the MINE "text/txt" format.

Some text editors require both the return and line feed characters to indicate a new line. In Javascript these are added via the "\r\n" control character codes.

A list of control characters
\a Bell
\b Backspace
\t Horizontal Tab
\n Line feed
\v Vertical Tab
\f Form feed
\r Carriage return



// Parameters.
// text = A Javascript String
// filename = The requested filename. This filename may not be the name of the file that ends up on the disk. 
//
// Return value
// returns true if the click event was dispatched. False if not. The true does not mean the file has downloaded. The user may chose 
// to cancel the download. I have not worked out a way to detect if the file has been downloaded.
function downloadText(text, filename) {
    var event;                                 // event object used to create a mouse click event Non IE browsers.
    var anchor = document.createElement('a');  // the anchor element used as a download link
    var blob = new Blob([text], { type: 'text/txt' }); // Create a textfile Blob to download
    anchor.href = URL.createObjectURL(blob);   // Create the URL from the blob and set the links href to that URL 
    anchor.download = filename;                // set the download requested filename (HTML5) 
    if (document.createEvent) {                // check if the createEvent method is supported by the browser
        event = document.createEvent("MouseEvents");    // create a new mouse event
        event.initMouseEvent("click", true, true, window,   // set the event to a click
                         0, 0, 0, 0, 0, false, false, false,
                         false, 0, null);
        anchor.dispatchEvent(event);           // fire the event
        return true;                           // all done
    } 

    if (anchor.fireEvent) {                    // For IE check is the fireEvent exists.
        anchor.fireEvent("onclick");           // Create and fire a onclick event.
        return true;                           // all done
    }

    return false; // Browser does not support this function.


}



Example usage.

var testString = "Hello world\r\n";
testString += new Date().toLocaleString()+"\r\n";
downloadText(testString, "myTextFile.txt");


Is This A Good Question/Topic? 0
  • +

Page 1 of 1