wake-up-neo.com

Wie exportiere ich JavaScript-Array-Informationen in csv (auf Clientseite)?

Ich weiß, dass es viele Fragen dieser Art gibt, aber ich muss dies mit JavaScript tun. Ich verwende Dojo 1.8 und habe alle Attributinformationen in einem Array, das wie folgt aussieht:

[["name1", "city_name1", ...]["name2", "city_name2", ...]]

Irgendeine Idee, wie ich das auf der Clientseite nach CSV exportieren kann?

javascriptcsvdojoexportclient-side
410
Sam007

Sie können dies in nativem JavaScript tun. Sie müssen Ihre Daten entsprechend in das korrekte CSV-Format parsen (vorausgesetzt, Sie verwenden für Ihre Daten ein Array von Arrays, wie Sie es in der Frage beschrieben haben):

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

oder der kürzere Weg (mit Pfeilfunktionen ):

const rows = [["name1", "city1", "some other info"], ["name2", "city2", "more info"]];
let csvContent = "data:text/csv;charset=utf-8," + rows.map(e=>e.join(",")).join("\n");

Dann können Sie die window.open- und encodeURI-Funktionen von JavaScript verwenden, um die CSV-Datei wie folgt herunterzuladen:

var encodedUri = encodeURI(csvContent);
window.open(encodedUri);

Bearbeiten:

Wenn Sie Ihrer Datei einen bestimmten Namen geben möchten, müssen Sie etwas anders vorgehen, da dies beim Zugriff auf einen Daten-URI mit der window.open-Methode nicht unterstützt wird. Um dies zu erreichen, können Sie einen versteckten <a>-DOM-Knoten erstellen und sein download-Attribut wie folgt festlegen:

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".
677
Default

Basierend auf den obigen Antworten habe ich diese Funktion erstellt, die ich unter IE 11, Chrome 36 und Firefox 29 getestet habe 

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);
        }
    }
}

Zum Beispiel: https://jsfiddle.net/jossef/m3rrLzk0/

190
Xavier John

Diese Lösung sollte mit Internet Explorer 10+, Edge, alten und neuen Versionen von Chrome, FireFox, Safari, ++ funktionieren.

Die akzeptierte Antwort funktioniert nicht mit IE und 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');

Beim Ausführen des Code-Snippets werden die Modelldaten als csv heruntergeladen

Dank an dandavis https://stackoverflow.com/a/16377813/1350598

64
Arne H. Bitubekk

Ich kam hierher und suchte nach mehr RFC 4180-Konformität. Ich konnte keine Implementierung finden. Daher habe ich eine (möglicherweise ineffiziente) Implementierung für meine eigenen Bedürfnisse gemacht. Ich dachte, ich würde es mit allen teilen.

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');

Hoffentlich hilft dies jemandem in der Zukunft. Dies kombiniert sowohl die Codierung des CSV als auch die Möglichkeit, die Datei herunterzuladen. In meinem Beispiel auf jsfiddle . Sie können die Datei herunterladen (vorausgesetzt HTML 5-Browser) oder die Ausgabe in der Konsole anzeigen.

AKTUALISIEREN:

Offenbar hat Chrome die Möglichkeit verloren, die Datei zu benennen. Ich bin mir nicht sicher, was passiert ist oder wie ich es reparieren kann, aber wenn ich diesen Code (einschließlich jsfiddle) verwende, heißt die heruntergeladene Datei jetzt download.csv.

34
Uxonith

Die Lösung von @Default funktioniert perfekt auf Chrome (vielen Dank dafür!), Aber ich hatte ein Problem mit dem IE.

Hier ist eine Lösung (funktioniert auf 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")
30
Dzarek

Im Chrome 35-Update wurde das Verhalten des Download-Attributs geändert.

https://code.google.com/p/chromium/issues/detail?id=373182

um dies in Chrom zu bearbeiten, verwenden Sie dies 

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();
15
Monu

Arbeiten für alle Sprachen

        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', '日本語'],
    ])
13
Serdar Didan

Da gehst du hin: 

<!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>
12
Madhulika Mukherjee
//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
7
Mauri

Erstellen Sie einen Blob mit den CSV-Daten .ie var blob = new Blob([data], type:"text/csv");

Wenn der Browser das Speichern von Blobs d. H. if window.navigator.mSaveOrOpenBlob)===true unterstützt, speichern Sie die CSV-Daten mit: window.navigator.msSaveBlob(blob, 'filename.csv')

Wenn der Browser das Speichern und Öffnen von Blobs nicht unterstützt, speichern Sie die CSV-Daten als: 

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);

Vollständiger Code-Ausschnitt:

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(); 
}
5
Liyosi

Hier gibt es zwei Fragen:

  1. Wie konvertiert man ein Array in einen CSV-String?
  2. So speichern Sie diese Zeichenfolge in einer Datei

Alle Antworten auf die erste Frage (außer der von Milimetric) wirken hier wie ein Overkill. Die von Milimetric deckt keine alternativen Anforderungen ab, wie z. B. das Umgeben von Strings mit Anführungszeichen oder das Konvertieren von Arrays von Objekten. 

Hier sind meine Ansichten dazu:

Für eine einfache csv reicht eine map () und ein join ():

    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

Mit dieser Methode können Sie auch ein anderes Trennzeichen als ein Komma im Inner Join angeben. zum Beispiel eine Registerkarte: d.join('\t')

Auf der anderen Seite, wenn Sie es richtig machen wollen und Strings in Anführungszeichen "" setzen wollen, können Sie etwas JSON-Magie verwenden:

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

wenn Sie ein Array von Objekten haben wie:

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, '');
4
Konstantin

Viele eigene Lösungen zum Konvertieren von Daten in CSV, aber fast alle haben verschiedene Vorbehalte hinsichtlich des Datentyps, den sie korrekt formatieren, ohne Excel oder ähnliches auszulösen. 

Warum nicht etwas Bewährtes verwenden: Papa Parse

Papa.unparse(data[, config])

Dann kombinieren Sie dies einfach mit einer der lokalen Download-Lösungen. die von @ArneHB sieht gut aus.

3
John Rix

Eine Pfeilfunktion mit ES6:

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

Dann : 

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

Falls jemand dies für reactjs benötigt, ist react-csv dafür da 

3
Abdennour TOUMI

Sie können den Code unten verwenden, um ein Array mithilfe von Javascript in eine CSV-Datei zu exportieren.

Dies behandelt auch Sonderzeichen

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();

Hier ist der Link zur Arbeit mit jsfiddle 

3
Vignesh Subramanian

So lade ich CSV-Dateien in meiner Java-GWT-Anwendung clientseitig herunter. Besonderer Dank geht an Xavier John für seine Lösung. Es wurde bestätigt, dass es in FF 24.6.0, IE 11.0.20 und Chrome 45.0.2454.99 (64-Bit) funktioniert. Ich hoffe, das erspart jemandem etwas Zeit:

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);
            }
        }
    }-*/;
}
1
Justin Stein

Hier ist eine Angular-freundliche 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)}`);
    }
  };
1
Chrillewoodz

Die obigen Antworten funktionieren, wenn Sie jedoch im .xls-Format öffnen, werden die Spalten ~~ möglicherweise durch '\t' anstelle von ',' getrennt, die Antwort https://stackoverflow.com/a/14966131/6169225 funktionierte gut für mich, solange ich .join('\t') in den Arrays anstelle von .join(',') verwendete.

1
Marquistador

Leute versuchen, ihre eigene CSV-Zeichenfolge zu erstellen, die in Edge-Fällen, z. Sonderzeichen und so, das ist doch sicher ein gelöstes Problem oder?

papaparse - Verwendung für die JSON-zu-CSV-Codierung. Papa.unparse().

import Papa from "papaparse";

const downloadCSV = (args) => {  

  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("a");
      a.href = window.URL.createObjectURL(blob, {type: "text/plain"});
      a.download = filename;
      document.body.appendChild(a);
      a.click();  // IE: "Access is denied"; see: https://connect.Microsoft.com/IE/feedback/details/797361/ie-10-treats-blob-url-as-cross-Origin-and-denies-access
      document.body.removeChild(a);
  }

}

Anwendungsbeispiel

downloadCSV({ 
  filename: 'filename.csv',
  data: [{'a': '1', 'b': 2'}],
  columns: ['a','b']
});

https://github.com/mholt/PapaParse/issues/175 - Siehe diesen Kommentar für die Diskussion zur Browserunterstützung.

0
Glen Thompson

Probieren Sie es einfach aus, einige der Antworten hier behandeln keine Unicode-Daten und Daten mit Komma, zum Beispiel Datum.

function downloadUnicodeCSV(filename, datasource) {
    var content = '', newLine = '\r\n';
    for (var _i = 0, datasource_1 = datasource; _i < datasource_1.length; _i++) {
        var line = datasource_1[_i];
        var i = 0;
        for (var _a = 0, line_1 = line; _a < line_1.length; _a++) {
            var item = line_1[_a];
            var it = item.replace(/"/g, '""');
            if (it.search(/("|,|\n)/g) >= 0) {
                it = '"' + it + '"';
            }
            content += (i > 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);
};
0
imal hasaranga perera

Ich habe die Xavier Johns-Funktion hinzugefügt, um bei Bedarf auch die Feldheader einzubeziehen, verwendet jedoch jQuery. Das $ .each-Bit muss für eine native JavaScript-Schleife geändert werden

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);
        }
    }
}
0
Bim

Ich benutze diese Funktion, um einen string[][] in eine CSV-Datei zu konvertieren. Es zitiert eine Zelle, wenn sie einen ", einen , oder ein anderes Leerzeichen (außer Leerzeichen) enthält: 

/**
 * 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

}

Hinweis : funktioniert nicht mit Internet Explorer <11, es sei denn, map ist polyfilled.

Hinweis : Wenn die Zellen Zahlen enthalten, können Sie cell=''+cell vor if (cell.replace... hinzufügen, um Zahlen in Strings zu konvertieren.

Oder Sie können es mit ES6 in eine Zeile schreiben:

t.map(r=>r.map(c=>c.replace(/ /g, '').match(/[\s,"]/)?'"'+c.replace(/"/g,'""')+'"':c).join(',')).join('\n')
0
Michael_Scharf

Falls jemand dies für knockout js benötigt, funktioniert es grundsätzlich mit der vorgeschlagenen Lösung:

html:

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

modell ansehen:

// 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);
0
Milimetric

Dies ist eine modifizierte Antwort, die auf der akzeptierten Antwort basiert, wobei die Daten von JSON stammen würden.

            JSON Data Ouptut:
             0 :{emails: "SAMPLE Co., [email protected]"}, 1:{emails: "Another CO. , [email protected]"}


            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();
        });
0
Ronald G

Ich würde empfehlen, eine Bibliothek wie PapaParse zu verwenden: https://github.com/mholt/PapaParse

Die akzeptierte Antwort hat derzeit mehrere Probleme, darunter:

  • es schlägt fehl, wenn die Daten ein Komma enthalten
  • es schlägt fehl, wenn die Daten einen Zeilenumbruch enthalten
  • es versagt (irgendwie), wenn die Daten ein Anführungszeichen enthalten
0
Falk Tandetzky