当前位置 : 首页 » 互动问答 » 正文

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

分类 : 互动问答 | 发布时间 : 2013-02-20 00:49:24 | 评论 : 22 | 浏览 : 383981 | 喜欢 : 382

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?

回答(22)

  • 1楼
  • 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";
    }); 
    

    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 <a> 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".
    
  • 2楼
  • 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 < 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) >= 0)
                    result = '"' + result + '"';
                if (j > 0)
                    finalVal += ',';
                finalVal += result;
            }
            return finalVal + '\n';
        };
    
        var csvFile = '';
        for (var i = 0; i < 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/

  • 3楼
  • 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.

    // Example data given in question text
    var data = [
      ['name1', 'city1', 'some other info'],
      ['name2', 'city2', 'more info']
    ];
    
    // Building the CSV from the Data two-dimensional array
    // Each column is separated by ";" and new line "\n" for next row
    var csvContent = '';
    data.forEach(function(infoArray, index) {
      dataString = infoArray.join(';');
      csvContent += index < data.length ? dataString + '\n' : dataString;
    });
    
    // The download function takes a CSV string, the filename and mimeType as parameters
    // Scroll/look down at the bottom of this snippet to see how download is called
    var download = function(content, fileName, mimeType) {
      var a = document.createElement('a');
      mimeType = mimeType || 'application/octet-stream';
    
      if (navigator.msSaveBlob) { // IE10
        navigator.msSaveBlob(new Blob([content], {
          type: mimeType
        }), fileName);
      } else if (URL && 'download' in a) { //html5 A[download]
        a.href = URL.createObjectURL(new Blob([content], {
          type: mimeType
        }));
        a.setAttribute('download', fileName);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      } else {
        location.href = 'data:application/octet-stream,' + encodeURIComponent(content); // only this mime type is supported
      }
    }
    
    download(csvContent, 'dowload.csv', 'text/csv;encoding:utf-8');

    Running the code snippet will download the mock data as csv

    Credits to dandavis https://stackoverflow.com/a/16377813/1350598

  • 4楼
  • 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 < content.length; i++) {
        var value = content[i];
    
        for (var j = 0; j < value.length; j++) {
            var innerValue =  value[j]===null?'':value[j].toString();
            var result = innerValue.replace(/"/g, '""');
            if (result.search(/("|,|\n)/g) >= 0)
                result = '"' + result + '"';
            if (j > 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.

  • 5楼
  • 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")
    
  • 6楼
  • 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();
    
  • 7楼
  • There you go :

    <!doctype html>  
    <html>  
    <head></head>  
    <body>
    <a href='#' onclick='downloadCSV({ filename: "stock-data.csv" });'>Download CSV</a>
    
    <script type="text/javascript">  
        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 > 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);
           }
    </script>  
    </body>  
    </html>  
    
  • 8楼
  • Working for all languages

            function convertToCsv(fName, rows) {
            var csv = '';
            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
                for (var j = 0; j < row.length; j++) {
                    var val = row[j] === null ? '' : row[j].toString();
                    val = val.replace(/\t/gi, " ");
                    if (j > 0)
                        csv += '\t';
                    csv += val;
                }
                csv += '\n';
            }
    
            // for UTF-16
            var cCode, bArr = [];
            bArr.push(255, 254);
            for (var i = 0; i < csv.length; ++i) {
                cCode = csv.charCodeAt(i);
                bArr.push(cCode & 0xff);
                bArr.push(cCode / 256 >>> 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', 'čeština'],
            ['6', 'Slovenščina'],
            ['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', '日本語'],
        ])
    
  • 9楼
  • //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
    
  • 10楼
  • 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('<a></a>');
    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('<a></a>');
        downloadLink.attr('href', window.URL.createObjectURL(blob));
        downloadLink.attr('download', filename);
        downloadLink.attr('target', '_blank');  
        document.body.append(downloadLink); 
        downloadLink[0].click(); 
    }
    
  • 11楼
  • There are two questions here:

    1. How to convert an array to csv string
    2. 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, '');
    
  • 12楼
  • One arrow function with ES6 :

    const dataToCsvURI = (data) => encodeURI(
    `data:text/csv;charset=utf-8,${data.map((row, index) =>  row.join(',')).join(`\n`)}`
    );
    

    Then :

    window.open(
      dataToCsvURI(
       [["name1", "city_name1"/*, ...*/], ["name2", "city_name2"/*, ...*/]]
      )
    );
    

    In case anyone needs this for , react-csv is there for that

  • 13楼
  • 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.

  • 14楼
  • 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<List<String>> data) 
        {
            StringBuilder sb = new StringBuilder();
            for(List<String> row : data) 
            {
                for(int i=0; i<row.size(); i++)
                {
                    if(i>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);
                }
            }
        }-*/;
    }
    
  • 15楼
  • 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(',').

  • 16楼
  • 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 && '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)}`);
        }
      };
    
  • 17楼
  • In case anyone needs this for knockout js, it works ok with basically the proposed solution:

    html:

    <a data-bind="attr: {download: filename, href: csvContent}">Download</a>
    

    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);
    
  • 18楼
  • 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 < row.length; j++) {
                if(i == 0 && j == 0 && 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) >= 0){
                            fieldResult = '"' + fieldResult + '"';
                        }
                        //console.log(fieldResult);
                        if (ii > 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) >= 0){
                    result = '"' + result + '"';
                }
                if (j > 0){
                    finalVal += ',';
                    finalVal += result;
                }else{
                    finalVal += result;
                }
            }
            return finalVal + '\n';
        };
        var csvFile = '';
        for (var i = 0; i < 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);
            }
        }
    }
    
  • 19楼
  • 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();
            });
    
  • 20楼
  • 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 < 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=>r.map(c=>c.replace(/ /g, '').match(/[\s,"]/)?'"'+c.replace(/"/g,'""')+'"':c).join(',')).join('\n')
    
  • 21楼
  • 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, é,í,ú,ü,ű"],["Séjour 2, é,í,ú,ü,ű"]];
    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

  • 22楼
  • 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

相关阅读:

Remove duplicates from an array of objects in JavaScript

Can I call jquery click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?

Check whether a string matches a regex in JS

jQuery event to trigger action when a div is made visible

Check if user is using IE with jQuery

Resize HTML5 canvas to fit window

How do I replace a character at a particular index in JavaScript?

JavaScript file upload size validation

Converting a string to a date in JavaScript

How to get the data-id attribute?