Export javascript data to CSV file without server interaction

Question

If we were on a nodeJS server  we could write a header  set a mime type  and send it   res header  Content-Disposition    attachment filename   name   csv     res type  text csv    res send 200  csvString     and because of the headers  the browser will create a download for the named csv file   When useful data is generated in a browser  one solution to getting it in a CSV file is to use ajax  upload it to the server   perhaps optionally save it there  and get the server to send it back with these headers to become a csv download back at the browser   However  I would like a 100  browser solution that does not involve ping-pong with the server   So it occurred to me that one could open a new window and try to set the header with a META tag equivalent     But this doesn t work for me in recent Chrome     I do get a new window  and it contains the csvString  but does not act as a download   I guess I expected to get either a download in a bottom tab or a blank new window with a download in a bottom tab     I m wondering if the meta tags are correct or if other tags are also needed   Is there a way to make this work without punting it to the server   JsFiddle for Creating a CSV in the Browser  not working - outputs window but no download   var A      n   sqrt n          initialize array of rows with header row as 1st item for var j 1 j lt 10   j   A push  j  Math sqrt j      var csvRows       for var i 0 l A length  i lt l    i       csvRows push A i  join             unquoted CSV row   var csvString   csvRows join   n    console log csvString   var csvWin   window open            csvWin document write   lt meta name  content-type  content  text csv  gt     csvWin document write   lt meta name  content-disposition  content  attachment   filename data csv  gt       csvWin document write csvString

User · Answer

adeneo answer works for Firefox and chrome    For IE the below can be used    x000D   x000D  if  window navigator msSaveOrOpenBlob    x000D    var blob   new Blob  decodeURIComponent encodeURI result data       x000D      type   text csv charset utf-8   x000D        x000D    navigator msSaveBlob blob   FileName csv    x000D    x000D   x000D   x000D

User · Answer

See adeneo s answer  but to make this work in Excel in all countries you should add  SEP    to the first line of the file  This will set the standard separator in Excel and will not show up in the actual document  var csvString    SEP    n    csvRows join   r n

User · Answer

Once I packed JS code doing that to a tiny library   https   github com AlexLibs client-side-csv-generator  The Code  Documentation and Demo Playground are provided on Github   Enjoy     Pull requests are welcome

User · Answer

We can easily create and export download the excel file with any separator  in this answer I am using the comma separator  using javascript  I am not using any external package for creating the excel file    x000D   x000D      var Head      x000D           Heading 1   x000D           Heading 2    x000D           Heading 3    x000D           Heading 4  x000D          x000D   x000D      var row     x000D          key1 1 key2 2  key3 3  key4 4   x000D          key1 2 key2 5  key3 6  key4 7   x000D          key1 3 key2 2  key3 3  key4 4   x000D          key1 4 key2 2  key3 3  key4 4   x000D          key1 5 key2 2  key3 3  key4 4  x000D         x000D   x000D  for  var item   0  item  lt  row length    item    x000D         Head push   x000D            row item  key1  x000D            row item  key2  x000D            row item  key3  x000D            row item  key4 x000D             x000D    x000D   x000D  var csvRows       x000D  for  var cell   0  cell  lt  Head length    cell    x000D         csvRows push Head cell  join        x000D    x000D               x000D  var csvString   csvRows join   n    x000D  let csvFile   new Blob  csvString     type   text csv      x000D  let downloadLink   document createElement  a    x000D  downloadLink download    MYCSVFILE csv   x000D  downloadLink href   window URL createObjectURL csvFile   x000D  downloadLink style display    none   x000D  document body appendChild downloadLink   x000D  downloadLink click    x000D   x000D   x000D

User · Answer

There s always the HTML5 download attribute       This attribute  if present  indicates that the author intends the   hyperlink to be used for downloading a resource so that when the user   clicks on the link they will be prompted to save it as a local file       If the attribute has a value  the value will be used as the pre-filled   file name in the Save prompt that opens when the user clicks on the   link      var A      n   sqrt n       for var j 1  j lt 10    j        A push  j  Math sqrt j        var csvRows        for var i 0  l A length  i lt l    i       csvRows push A i  join           var csvString   csvRows join   0A    var a           document createElement  a    a href           data attachment csv      encodeURIComponent csvString   a target          blank   a download       myFile csv    document body appendChild a   a click      FIDDLE  Tested in Chrome and Firefox  works fine in the newest versions  as of July 2013   Works in Opera as well  but does not set the filename  as of July 2013   Does not seem to work in IE9  big suprise   as of July 2013    An overview over what browsers support the download attribute can be found Here For non-supporting browsers  one has to set the appropriate headers on the serverside     Apparently there is a hack for IE10 and IE11  which doesn t support the download attribute  Edge does however      var A      n   sqrt n       for var j 1  j lt 10    j        A push  j  Math sqrt j        var csvRows        for var i 0  l A length  i lt l    i       csvRows push A i  join           var csvString   csvRows join   0A     if  window navigator msSaveOrOpenBlob        var blob   new Blob  csvString        window navigator msSaveOrOpenBlob blob   myFile csv      else       var a           document createElement  a        a href           data attachment csv      encodeURIComponent csvString       a target          blank       a download       myFile csv       document body appendChild a       a click

User · Answer

See adeneo s answer  but don t forget encodeURIComponent   a href        data application csv charset utf-8     encodeURIComponent csvString     Also  I needed to do   r n  not just   n  for the row delimiter   var csvString   csvRows join   r n      Revised fiddle  http   jsfiddle net 7Q3c6

[javascript] Export javascript data to CSV file without server interaction

Examples related to javascript

Examples related to export-to-csv