JavaScript to a .csv file

**gits** · Jul 21 '08, 06:26 PM

with standard-javascript you cannot save anything (except a cookie) to the client's filesystem ... that would be a noteworthy security issue ...

you could send the data to the server and let the user download the csv-file instead.

kind regards

**rnd me** · Jul 21 '08, 07:57 PM

you can save to a write-enabled directory, provided you have the permissions; available via basic authentication.

then you just join you row arrays with a "," and the rows with a "\r\n", and save that string to a file.

**gits** · Jul 22 '08, 06:52 AM

for such an solution you have to implement it for every browser in a special way ... even to get the correct privilileges?

**rnd me** · Jul 23 '08, 08:28 AM

Loading and Saving Files with browser javascript

Most of the ajax examples I've come across are complicated and use a two-step asynchronous process to fetch data.
new users get lost in the status checking and callback writing, and simply want to load a text file like a csv log file, an m3u playlist, or a css stylesheet into a variable.

browser javascript can use standard http methods like
GET, PUT, and DELETE to create, modify, and manage files on a remote server.

Setup:

for reading:
no setup is required to simply read a file into a string. while i have found way to sniff out ajax-type requests like used below, i haven't noticed anyone doing so.

for writing
The only configuration needed on the server, is the allowance of public or user-based write permissions. check configuration section of your hosting providers. most allow you to setup public read-private write on files. that's great because everyone can instantly see the changes only you can make.
browsers should automatically ask you to login if you try to write to a file that has private write. Assigning the permissions to the urls you will use in this code is a critical security consideration.

setup can be done with winxp pro's iis server by right-clicking a folder in the IIS web site folder-view. (run compmgmt.msc to view)

if you use apache, then you will need a bit of server-side code called a
put handler to catch the PUT requests. (module here)

however, many apache installations have these capabilities ready to go.

the IO function:

Code:

function IO(U, V) {//LA MOD String Version. A tiny ajax library.  by, DanDavis
    var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
    X.open(V ? 'PUT' : 'GET', U, false );
    X.setRequestHeader('Content-Type', 'text/html')
    X.send(V ? V : '');
return X.responseText;}

arguments[0] is the url (relative or absolute) of the file you want to access.
arguments[1] is an optional string .
if arguments[1] is set to anything, IO places that string into the url passed in arguments[0]

A tested cut-and-paste example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript-only file writing</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>javascript fileIO demo</h1>	
open <a href='newPage.htm' target="_blank">my new page</a> in a new tab/window.
<br />
<br />

<textarea rows='10' cols='80' id='userValue'>Hello World</textarea>	
<br />

<input type='button' value='Save' onclick="doSave()"  />	

&nbsp;&nbsp;&nbsp;
<input type='button'  value='Load' onclick="doLoad()"  />	

<script type='text/javascript'>


function el(tid) {return document.getElementById(tid);}

function IO(U, V) {//LA MOD String Version. A tiny ajax library.  by, DanDavis
    var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
    X.open(V ? 'PUT' : 'GET', U, false );
    X.setRequestHeader('Content-Type', 'text/html')
    X.send(V ? V : '');
return X.responseText;}	


function doSave(){
	IO("newPage.htm" , el("userValue").value ); 
}

function doLoad(){
	el("userValue").value = IO("newPage.htm"); 
}

</script>


</body>
</html>

So will this work for me?

working servers support GET, so consider IO's read capability reliable.

you can check what methods your server supports by saving the code below as "servertest.htm " (or whatever) and opening it your browser.
it will list the HTTP verbs your server will support. for saving files, you need PUT.

Code:

<html><head><script>

    function sOptions(tUrl) { //server options
        var XHRt =  !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
        XHRt.open("OPTIONS", tUrl , false);
        XHRt.send("");
        return XHRt.getResponseHeader("Allow").split(/\W+/g);
    }

  document.write (sOptions(window.location.href));
  document.close()
</script></head</html>

One more bonus (no example)
if you are allowed to do so, you can delete files as well:

Code:

function DELETE(U) {//LA MOD  A tiny ajax library.  (c)2007, DanDavis
    var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
    X.open("DELETE");
    X.send('');
return X.status;}

**gits** · Jul 23 '08, 08:48 AM

i see ... nice explaination, very well done ;) but i thought the OP wanted to have that clientside ... so in either way the best would be just to write a file at the server and provide a link to download it ... since we cannot reliably write a file directly to the client's filesystem (unless having enhanced browser privileges that are very different in every browser and we cannot rely on that except it would be an intranet) ...

kind regards

JavaScript to a .csv file

JavaScript to a .csv file

Comment

Comment

Comment

Comment

Comment