By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,817 Members | 2,152 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,817 IT Pros & Developers. It's quick & easy.

JavaScript to a .csv file

P: 1
I need to take data extracted from a web training via javascript and have it saved to a standard .csv file. I canget it to send via email but I need it to save as a .csv instead. Thanks
Jul 21 '08 #1
Share this Question
Share on Google+
5 Replies


gits
Expert Mod 5K+
P: 5,344
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
Jul 21 '08 #2

rnd me
Expert 100+
P: 427
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.
Jul 21 '08 #3

gits
Expert Mod 5K+
P: 5,344
for such an solution you have to implement it for every browser in a special way ... even to get the correct privilileges?
Jul 22 '08 #4

rnd me
Expert 100+
P: 427
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:

Expand|Select|Wrap|Line Numbers
  1. function IO(U, V) {//LA MOD String Version. A tiny ajax library.  by, DanDavis
  2.     var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
  3.     X.open(V ? 'PUT' : 'GET', U, false );
  4.     X.setRequestHeader('Content-Type', 'text/html')
  5.     X.send(V ? V : '');
  6. 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:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>javascript-only file writing</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. </head>
  7. <body>
  8. <h1>javascript fileIO demo</h1>    
  9. open <a href='newPage.htm' target="_blank">my new page</a> in a new tab/window.
  10. <br />
  11. <br />
  12.  
  13. <textarea rows='10' cols='80' id='userValue'>Hello World</textarea>    
  14. <br />
  15.  
  16. <input type='button' value='Save' onclick="doSave()"  />    
  17.  
  18. &nbsp;&nbsp;&nbsp;
  19. <input type='button'  value='Load' onclick="doLoad()"  />    
  20.  
  21. <script type='text/javascript'>
  22.  
  23.  
  24. function el(tid) {return document.getElementById(tid);}
  25.  
  26. function IO(U, V) {//LA MOD String Version. A tiny ajax library.  by, DanDavis
  27.     var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
  28.     X.open(V ? 'PUT' : 'GET', U, false );
  29.     X.setRequestHeader('Content-Type', 'text/html')
  30.     X.send(V ? V : '');
  31. return X.responseText;}    
  32.  
  33.  
  34. function doSave(){
  35.     IO("newPage.htm" , el("userValue").value ); 
  36. }
  37.  
  38. function doLoad(){
  39.     el("userValue").value = IO("newPage.htm"); 
  40. }
  41.  
  42. </script>
  43.  
  44.  
  45. </body>
  46. </html>
  47.  
  48.  

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.



Expand|Select|Wrap|Line Numbers
  1. <html><head><script>
  2.  
  3.     function sOptions(tUrl) { //server options
  4.         var XHRt =  !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
  5.         XHRt.open("OPTIONS", tUrl , false);
  6.         XHRt.send("");
  7.         return XHRt.getResponseHeader("Allow").split(/\W+/g);
  8.     }
  9.  
  10.   document.write (sOptions(window.location.href));
  11.   document.close()
  12. </script></head</html>
  13.  


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


Expand|Select|Wrap|Line Numbers
  1. function DELETE(U) {//LA MOD  A tiny ajax library.  (c)2007, DanDavis
  2.     var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
  3.     X.open("DELETE");
  4.     X.send('');
  5. return X.status;}
  6.  
Jul 23 '08 #5

gits
Expert Mod 5K+
P: 5,344
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
Jul 23 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.