How to export JavaScript array info to csv on client side

Question

I know there are lot of questions of this nature but I need to do this using JavaScript  I am using Dojo 1 8 and have all the attribute info in array  which looks like this      name1    city name1         name2    city name2           Any idea how I can export this to CSV on the client side

User · Answer

Create a blob with the csv data  ie var blob   new Blob  data   type  text csv     If the browser supports saving of blobs i e if window navigator mSaveOrOpenBlob    true  then save the csv data using   window navigator msSaveBlob blob   filename csv    If the browser doesn t support saving and opening of blobs  then save csv data as    var downloadLink   document createElement   lt a gt  lt  a gt     downloadLink attr  href   window URL createObjectURL blob    downloadLink attr  download   filename   downloadLink attr  target     blank    document body append downloadLink     Full Code snippet   var filename    data    new Date    getTime     csv   var charset    utf-8   var blob   new Blob  data          type   text csv charset    charset           if  window navigator msSaveOrOpenBlob         window navigator msSaveBlob blob  filename     else       var downloadLink   document element   lt a gt  lt  a gt         downloadLink attr  href   window URL createObjectURL blob        downloadLink attr  download   filename       downloadLink attr  target     blank          document body append downloadLink        downloadLink 0  click

User · Answer

The following is a native js solution    x000D   x000D  function export2csv     x000D    let data       x000D    const tableData       x000D    const rows     x000D        111    222    333    x000D        aaa    bbb    ccc    x000D        AAA    BBB    CCC   x000D       x000D    for  const row of rows    x000D      const rowData       x000D      for  const column of row    x000D        rowData push column   x000D        x000D      tableData push rowData join        x000D      x000D    data    tableData join   n    x000D    const a   document createElement  a    x000D    a href   URL createObjectURL new Blob  data     type   text csv       x000D    a setAttribute  download    data csv    x000D    document body appendChild a   x000D    a click    x000D    document body removeChild a   x000D    x000D   lt button onclick  export2csv    gt Export array to csv file lt  button gt  x000D   x000D   x000D

User · Answer

You can do this in native JavaScript  You ll have to parse your data into correct CSV format as so  assuming you are using an array of arrays for your data as you have described in the question    const rows           name1    city1    some other info          name2    city2    more info       let csvContent    data text csv charset utf-8     rows forEach function rowArray        let row   rowArray join           csvContent    row     r n         or the shorter way  using arrow functions    const rows           name1    city1    some other info          name2    city2    more info       let csvContent    data text csv charset utf-8          rows map e   gt  e join       join   n      Then you can use JavaScript s window open and encodeURI functions to download the CSV file like so   var encodedUri   encodeURI csvContent   window open encodedUri     Edit  If you want to give your file a specific name  you have to do things a little differently since this is not supported accessing a data URI using the window open method  In order to achieve this  you can create a hidden  lt a gt  DOM node and set its download attribute as follows   var encodedUri   encodeURI csvContent   var link   document createElement  a    link setAttribute  href   encodedUri   link setAttribute  download    my data csv    document body appendChild link      Required for FF  link click       This will download the data file named  my data csv

User · Answer

The answers above work  but keep in mind that if you are opening up in the  xls format  columns   might   be separated by   t  instead of      the answer https   stackoverflow com a 14966131 6169225 worked well for me  so long as I used  join   t   on the arrays instead of  join

User · Answer

There you go      lt  doctype html gt     lt html gt     lt head gt  lt  head gt     lt body gt   lt a href     onclick  downloadCSV   filename   stock-data csv       gt Download CSV lt  a gt    lt script type  text javascript  gt        var stockData                           Symbol   AAPL               Company   Apple Inc                Price   132 54                                   Symbol   INTC               Company   Intel Corporation               Price   33 45                                   Symbol   GOOG               Company   Google Inc               Price   554 52                         function convertArrayOfObjectsToCSV args            var result  ctr  keys  columnDelimiter  lineDelimiter  data           data   args data    null          if  data    null     data length                return null                     columnDelimiter   args columnDelimiter                 lineDelimiter   args lineDelimiter      n            keys   Object keys data 0             result               result    keys join columnDelimiter           result    lineDelimiter           data forEach function item                ctr   0              keys forEach function key                    if  ctr  gt  0  result    columnDelimiter                   result    item key                   ctr                                result    lineDelimiter                       return result             window downloadCSV   function args            var data  filename  link           var csv   convertArrayOfObjectsToCSV               data  stockData                     if  csv    null  return           filename   args filename     export csv            if   csv match   data text  csv i                 csv    data text csv charset utf-8     csv                    data   encodeURI csv            link   document createElement  a            link setAttribute  href   data           link setAttribute  download   filename           document body appendChild link           link click            document body removeChild link             lt  script gt     lt  body gt     lt  html gt

User · Answer

Old question with many good answers  but here is another simple option that relies on two popular libraries to get it done  Some answers mention Papa Parse but roll their own solution for the download part  Combining Papa Parse and FileSaver js  you can try the following  const dataString   Papa unparse data  config   const blob   new Blob  dataString     type   text csv charset utf-8      FileSaver saveAs blob   myfile csv     The config options for unparse are described here

User · Answer

This solution should work with Internet Explorer 10   Edge  old and new versions of Chrome  FireFox  Safari      The accepted answer won t work with IE and Safari    x000D   x000D     Example data given in question text x000D  var data     x000D      name1    city1    some other info    x000D      name2    city2    more info   x000D     x000D   x000D     Building the CSV from the Data two-dimensional array x000D     Each column is separated by     and new line   n  for next row x000D  var csvContent       x000D  data forEach function infoArray  index    x000D    dataString   infoArray join       x000D    csvContent    index  lt  data length   dataString     n    dataString  x000D      x000D   x000D     The download function takes a CSV string  the filename and mimeType as parameters x000D     Scroll look down at the bottom of this snippet to see how download is called x000D  var download   function content  fileName  mimeType    x000D    var a   document createElement  a    x000D    mimeType   mimeType     application octet-stream   x000D   x000D    if  navigator msSaveBlob       IE10 x000D      navigator msSaveBlob new Blob  content     x000D        type  mimeType x000D          fileName   x000D      else if  URL  amp  amp   download  in a      html5 A download  x000D      a href   URL createObjectURL new Blob  content     x000D        type  mimeType x000D           x000D      a setAttribute  download   fileName   x000D      document body appendChild a   x000D      a click    x000D      document body removeChild a   x000D      else   x000D      location href    data application octet-stream     encodeURIComponent content      only this mime type is supported x000D      x000D    x000D   x000D  download csvContent   dowload csv    text csv encoding utf-8    x000D   x000D   x000D    Running the code snippet will download the mock data as csv  Credits to dandavis https   stackoverflow com a 16377813 1350598

User · Answer

If you are looking for a really quick solution you can also give a chance to this small library which will create and download CSV file for you  https   github com mbrn filefy  Usage is very simple   import   CsvBuilder   from  filefy    var csvBuilder   new CsvBuilder  user list csv      setColumns   name    surname       addRow   Eve    Holt       addRows         Charles    Morris          Tracey    Ramos           exportFile

User · Answer

There are two questions here    How to convert an array to csv string How to save that string to a file   All the answers to the first question  except the one by Milimetric  here seem like an overkill  And the one by Milimetric does not cover altrenative requirements  like surrounding strings with quotes or converting arrays of objects    Here are my takes on this   For a simple csv one map   and a join   are enough       var test array      name1   2  3     name2   4  5     name3   6  7     name4   8  9     name5   10  11        var csv   test array map function d           return d join           join   n            Results in      name1 2 3     name2 4 5     name3 6 7     name4 8 9     name5 10 11   This method also allows you to specify column separator other than a comma in the inner join  for example a tab  d join   t    On the other hand if you want to do it properly and enclose strings in quotes     then you can use some JSON magic   var csv   test array map function d          return JSON stringify d               join   n         replace              mg          remove opening   and closing                                         brackets from each line      would produce  name1  2 3  name2  4 5  name3  6 7  name4  8 9  name5  10 11   if you have array of objects like    var data         title    Book title 1    author    Name1 Surname1        title    Book title 2    author    Name2 Surname2        title    Book title 3    author    Name3 Surname3        title    Book title 4    author    Name4 Surname4          use var csv   data map function d           return JSON stringify Object values d                join   n         replace              mg

User · Answer

Based on the answers above I created this function that I have tested on IE 11  Chrome 36 and Firefox 29   function exportToCsv filename  rows        var processRow   function  row            var finalVal               for  var j   0  j  lt  row length  j                  var innerValue   row j      null        row j  toString                if  row j  instanceof Date                    innerValue   row j  toLocaleString                               var result   innerValue replace    g                     if  result search        n  g   gt   0                  result         result                    if  j  gt  0                  finalVal                     finalVal    result                    return finalVal     n               var csvFile           for  var i   0  i  lt  rows length  i              csvFile    processRow rows i               var blob   new Blob  csvFile     type   text csv charset utf-8           if  navigator msSaveBlob       IE 10          navigator msSaveBlob blob  filename         else           var link   document createElement  a            if  link download     undefined       feature detection                Browsers that support HTML5 download attribute             var url   URL createObjectURL blob               link setAttribute  href   url               link setAttribute  download   filename               link style visibility    hidden               document body appendChild link               link click                document body removeChild link                       For example  https   jsfiddle net jossef m3rrLzk0

User · Answer

Here s an Angular friendly version     constructor private location  Location  private renderer  Renderer2        download content  fileName  mimeType         const a   this renderer createElement  a         mimeType   mimeType     application octet-stream        if  navigator msSaveBlob           navigator msSaveBlob new Blob  content             type  mimeType           fileName             else if  URL  amp  amp   download  in a           const id   GetUniqueID           this renderer setAttribute a   id   id         this renderer setAttribute a   href   URL createObjectURL new Blob  content             type  mimeType                    this renderer setAttribute a   download   fileName          this renderer appendChild document body  a          const anchor   this renderer selectRootElement     id            anchor click           this renderer removeChild document body  a             else         this location go  data application octet-stream   encodeURIComponent content

User · Answer

I use this function to convert an string     to a csv file  It quotes a cell  if it contains a    a   or other whitespace  except blanks            Takes an array of arrays and returns a     sparated csv file      param  string      table     returns  string      function toCSV table        return table          map function row                return row                  map function cell                           We remove blanks and check if the column contains                        other whitespace     or                             In that case  we need to quote the column                      if  cell replace    g      match    s                                 return       cell replace    g                                                         return cell                                      join                           join   n       or   r n  for windows      Note  does not work on Internet Explorer  lt  11 unless map is polyfilled   Note  If the cells contain numbers  you can add cell    cell before if  cell replace    to convert numbers to strings   Or you can write it in one line using ES6   t map r  gt r map c  gt c replace    g      match    s          c replace    g           c  join       join   n

User · Answer

People are trying to create their own csv string  which fail on edge cases  e g  special characters  surely this is a solved problem right  papaparse - use for JSON to CSV encoding  Papa unparse    import Papa from  quot papaparse quot    const downloadCSV    args    gt         let filename   args filename     export csv     let columns   args columns    null     let csv   Papa unparse   data  args data  fields  columns     if  csv    null  return     var blob   new Blob  csv      if  window navigator msSaveOrOpenBlob      IE hack  see http   msdn microsoft com en-us library ie hh779016 aspx       window navigator msSaveBlob blob  args filename     else           var a   window document createElement  quot a quot          a href   window URL createObjectURL blob   type   quot text plain quot           a download   filename        document body appendChild a         a click        IE   quot Access is denied quot   see  https   connect microsoft com IE feedback details 797361 ie-10-treats-blob-url-as-cross-origin-and-denies-access       document body removeChild a           Example usage downloadCSV      filename   filename csv     data     a    1    b   2       columns    a   b        https   github com mholt PapaParse issues 175 - See this comment for browser support discussion

User · Answer

From react-admin  function downloadCsv csv  filename        const fakeLink   document createElement  a        fakeLink style display    none       document body appendChild fakeLink       const blob   new Blob  csv     type   text csv          if  window navigator  amp  amp  window navigator msSaveOrOpenBlob               Manage IE11   amp  Edge         window navigator msSaveOrOpenBlob blob     filename  csv          else           fakeLink setAttribute  href   URL createObjectURL blob            fakeLink setAttribute  download      filename  csv            fakeLink click              downloadCsv  Hello World    any-file-name csv

User · Answer

In Chrome 35 update  download attribute behavior was changed   https   code google com p chromium issues detail id 373182  to work this in chrome  use this   var pom   document createElement  a    var csvContent csv    here we load our csv data  var blob   new Blob  csvContent   type   text csv charset utf-8      var url   URL createObjectURL blob   pom href   url  pom setAttribute  download    foo csv    pom click

User · Answer

One arrow function with ES6    const dataToCsvURI    data    gt  encodeURI   data text csv charset utf-8   data map  row  index    gt   row join       join   n         Then   window open    dataToCsvURI        quot name1 quot    quot city name1 quot               quot name2 quot    quot city name2 quot                     In case anyone needs this for reactjs  react-csv is there for that

User · Answer

I added to Xavier Johns function to also include the field headers if needed  uses jQuery though  The   each bit will need changing for a native javascript loop  function exportToCsv filename  rows  headers   false        var processRow   function  row            row     map row  function value  index                return  value                       var finalVal               for  var j   0  j  lt  row length  j                  if i    0  amp  amp  j    0  amp  amp  headers    true                   var ii   0                    each rows i   function  index  value                           console log index                       var fieldName   index     null        index toString                          console log fieldName                       var fieldResult   fieldName replace    g                               console log fieldResult                       if  fieldResult search        n  g   gt   0                           fieldResult         fieldResult                                                    console log fieldResult                       if  ii  gt  0                           finalVal                                 finalVal    fieldResult                       else                          finalVal    fieldResult                                            ii                          console log finalVal                                       finalVal      n                     console log  end    finalVal                             var innerValue   row j      null        row j  toString                if  row j  instanceof Date                    innerValue   row j  toLocaleString                               var result   innerValue replace    g                     if  result search        n  g   gt   0                   result         result                                  if  j  gt  0                   finalVal                         finalVal    result               else                  finalVal    result                                  return finalVal     n              var csvFile           for  var i   0  i  lt  rows length  i              csvFile    processRow rows i              var blob   new Blob  csvFile     type   text csv charset utf-8           if  navigator msSaveBlob       IE 10          navigator msSaveBlob blob  filename        else          var link   document createElement  a            if  link download     undefined       feature detection                Browsers that support HTML5 download attribute             var url   URL createObjectURL blob               link setAttribute  href   url               link setAttribute  download   filename               link style visibility    hidden               document body appendChild link               link click                document body removeChild link

User · Answer

This is a modified answer based on the accepted answer wherein the data would be coming from JSON               JSON Data Ouptut               0   emails   SAMPLE Co   peter samplecompany com    1  emails   Another CO    ronald another com                 JS                getJSON  yourlink goes here     if you have parameters   function data                var csvContent    data text csv charset utf-8                var dataString                      each data  function k  v                    dataString    v emails     n                                 csvContent    dataString               var encodedUri   encodeURI csvContent               var link   document createElement  a                link setAttribute  href   encodedUri               link setAttribute  download    your filename csv                document body appendChild link      Required for FF              link click

User · Answer

In case anyone needs this for knockout js  it works ok with basically the proposed solution   html    lt a data-bind  attr   download  filename  href  csvContent   gt Download lt  a gt    view model      for the download link this filename   ko computed function          return ko unwrap this id      csv      this   this csvContent   ko computed function          if   this csvLink            var data   ko unwrap this data               ret    data text csv charset utf-8             ret    data map function  row                return row join                  join   n             return encodeURI ret            this

User · Answer

Here s how I download CSV files on the client side in my Java GWT application  Special thanks to Xavier John for his solution   It s been verified to work in FF 24 6 0  IE 11 0 20  and Chrome 45 0 2454 99  64-bit   I hope this saves someone a bit of time   public class ExportFile         private static final String CRLF     r n        public static void exportAsCsv String filename  List lt List lt String gt  gt  data                 StringBuilder sb   new StringBuilder            for List lt String gt  row   data                         for int i 0  i lt row size    i                                  if i gt 0  sb append                       sb append row get i                              sb append CRLF                      generateCsv filename  sb toString                private static native void generateCsv String filename  String text        -          var blob   new Blob  text     type   text csv charset utf-8                if  navigator msSaveBlob     IE 10                         navigator msSaveBlob blob  filename                      else                        var link   document createElement  a                if  link download     undefined     feature detection                                   Browsers that support HTML5 download attribute                 var url   URL createObjectURL blob                   link setAttribute  href   url                   link setAttribute  download   filename                   link style visibility    hidden                   document body appendChild link                   link click                    document body removeChild link                                -

User · Answer

A lot of roll-your-own solutions here for converting data to CSV  but just about all of them will have various caveats in terms of the type of data they will correctly format without tripping up Excel or the likes    Why not use something proven  Papa Parse  Papa unparse data   config     Then just combine this with one of the local download solutions here eg  the one by  ArneHB looks good

User · Answer

I would recommend using a library like PapaParse  https   github com mholt PapaParse  The accepted answer currently has multiple issues including    it fails if the data contains a comma it fails if the data contains a linebreak it  kind of  fails if the data contains a quotation mark

User · Answer

I came here looking for a bit more RFC 4180 compliance and I failed to find an implementation  so I made a  possibly inefficient  one for my own needs   I thought I would share it with everyone   var content      1st title    2nd title    3rd title    another title      a a a    bb nb    cc c    dd d      www    xxx    yyy    zzz      var finalVal        for  var i   0  i  lt  content length  i          var value   content i        for  var j   0  j  lt  value length  j              var innerValue    value j    null    value j  toString            var result   innerValue replace    g                 if  result search        n  g   gt   0              result         result                if  j  gt  0              finalVal                 finalVal    result             finalVal      n      console log finalVal    var download   document getElementById  download    download setAttribute  href    data text csv charset utf-8     encodeURIComponent finalVal    download setAttribute  download    test csv      Hopefully this will help someone out in the future   This combines both the encoding of the CSV along with the ability to download the file   In my example on jsfiddle  You can download the file  assuming HTML 5 browser  or view the output in the console   UPDATE   Chrome now appears to have lost the ability to name the file   I m not sure what s happened or how to fix it  but whenever I use this code  including the jsfiddle   the downloaded file is now named download csv

User · Answer

Simply try this  some of the answers here are not handling unicode data and data that has comma for example date   function downloadUnicodeCSV filename  datasource        var content       newLine     r n       for  var  i   0  datasource 1   datasource   i  lt  datasource 1 length   i              var line   datasource 1  i           var i   0          for  var  a   0  line 1   line   a  lt  line 1 length   a                  var item   line 1  a               var it   item replace    g                     if  it search        n  g   gt   0                    it         it                                  content     i  gt  0               it                i                    content    newLine            var link   document createElement  a        link setAttribute  href    data text csv charset utf-8  EF BB BF    encodeURIComponent content        link setAttribute  download   filename       link style visibility    hidden       document body appendChild link       link click        document body removeChild link

User · Answer

Download CSV File   let csvContent    quot data text csv charset utf-8  quot     rows forEach function  rowArray        for  var i   0  len   rowArray length  i  lt  len  i            if  typeof  rowArray i       string           rowArray i    rowArray i  replace   lt       n    gt  gm             rowArray i    rowArray i  replace    g                  let row   rowArray join  quot   quot        csvContent    row    quot  r n quot      add carriage return         var encodedUri   encodeURI csvContent     var link   document createElement  quot a quot      link setAttribute  quot href quot   encodedUri     link setAttribute  quot download quot    quot fileName csv quot      document body appendChild link     link click

User · Answer

Working for all languages          function convertToCsv fName  rows            var csv               for  var i   0  i  lt  rows length  i                  var row   rows i               for  var j   0  j  lt  row length  j                      var val   row j      null        row j  toString                    val   val replace   t gi                        if  j  gt  0                      csv      t                   csv    val                            csv      n                         for UTF-16         var cCode  bArr               bArr push 255  254           for  var i   0  i  lt  csv length    i                cCode   csv charCodeAt i               bArr push cCode  amp  0xff               bArr push cCode   256  gt  gt  gt  0                      var blob   new Blob  new Uint8Array bArr      type   text csv charset UTF-16LE               if  navigator msSaveBlob                navigator msSaveBlob blob  fName             else               var link   document createElement  a                if  link download     undefined                    var url   window URL createObjectURL blob                   link setAttribute  href   url                   link setAttribute  download   fName                   link style visibility    hidden                   document body appendChild link                   link click                    document body removeChild link                   window URL revokeObjectURL url                                        convertToCsv  download csv               Order    Language              1    English              2    Espa  ol              3    Fran  ais              4    Portugu  s              5    ce  tina              6    Sloven  cina              7    Ti ng Vi t              8    T  rk  e              9    Norsk bokm  l              10                          11                           12                         13                            14                         15                         16                      17                        18                       19                     20                         21                    22                     23

User · Answer

You can use the below piece of code to export array to CSV file using Javascript   This handles special characters part as well  var arrayContent      S  jour 1              u     S  jour 2              u     var csvContent   arrayContent join   n    var link   window document createElement  a    link setAttribute  href    data text csv charset utf-8  EF BB BF    encodeURI csvContent    link setAttribute  download    upload data csv    link click       Here is the link to working jsfiddle

User · Answer

It work in Chrome and IE     I reviewed and readed a lot of answer  then i used it and tested in both       var link   document createElement  a     if  link download     undefined       feature detection        Browsers that support HTML5 download attribute     var blob   new Blob  CSV     type   text csv charset utf-8           var url   URL createObjectURL blob                   link setAttribute  href   url       link setAttribute  download   fileName       link style    visibility hidden      if  navigator msSaveBlob       IE 10     link addEventListener  click   function  event         var blob   new Blob  CSV             type    text csv charset utf-8               navigator msSaveBlob blob  fileName        false      document body appendChild link   link click    document body removeChild link      Regards

User · Answer

The solution from  Default works perfect on Chrome  thanks a lot for that   but I had a problem with IE   Here s a solution  works on IE10    var csvContent data    here we load our csv data  var blob   new Blob  csvContent        type   text csv charset utf-8        navigator msSaveBlob blob   filename csv

[javascript] How to export JavaScript array info to csv (on client side)?

Examples related to javascript

Examples related to csv

Examples related to export

Examples related to client-side

Examples related to dojo-1.8