Wie exportiert man JavaScript-Array-Informationen in eine CSV-Datei (auf der Client-Seite)?

Question

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

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

Haben Sie eine Idee, wie ich dies auf der Client-Seite in CSV exportieren kann?

Answer 1

Ich bin hierher gekommen, um nach mehr RFC 4180-Konformität zu suchen, und ich habe keine Implementierung gefunden, also habe ich eine (möglicherweise ineffiziente) für meine eigenen Bedürfnisse erstellt. Ich dachte, ich würde es mit allen teilen.

var content = [['1. Titel', '2. Titel', '3. Titel', 'ein weiterer Titel'], ['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 wird dies jemandem in Zukunft helfen. 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, der Browser unterstützt HTML 5) oder die Ausgabe in der Konsole anzeigen.

AKTUALISIERUNG:

Chrome scheint jetzt die Fähigkeit verloren zu haben, die Datei zu benennen. Ich weiß nicht, was passiert ist oder wie man es beheben kann, aber immer wenn ich diesen Code verwende (einschließlich des jsfiddles), wird die heruntergeladene Datei jetzt download.csv genannt.

Answer 2

Menschen versuchen, ihren eigenen CSV-String zu erstellen, der in Randfällen, z. B. bei Sonderzeichen, scheitert. Dies ist sicherlich ein gelöstes Problem, oder?

papaparse - verwenden Sie für die Codierung von JSON in CSV 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; siehe 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: "Zugriff verweigert"; siehe: https://connect.microsoft.com/IE/feedback/details/797361/ie-10-treats-blob-url-as-cross-origin-and-denies-access
      document.body.removeChild(a);
  }

}

Beispielverwendung

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

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

Answer 3

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

Hier ist eine Lösung (funktioniert in IE10):

var csvContent=data; // hier laden wir unsere CSV-Daten
var blob = new Blob([csvContent],{
    type: "text/csv;charset=utf-8;"
});

navigator.msSaveBlob(blob, "filename.csv")

Answer 4

Für alle Sprachen funktioniert

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

        // für 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', [
        ['Auftrag', 'Sprache'],
        ['1', 'Englisch'],
        ['2', 'Español'],
        ['3', 'Français'],
        ['4', 'Português'],
        ['5', 'eština'],
        ['6', 'Slovenšina'],
        ['7', 'Ting Vit'],
        ['8', 'Türkçe'],
        ['9', 'Norsk bokmål'],
        ['10', ''],
        ['11', ''],
        ['12', ''],
        ['13', ''],
        ['14', ''],
        ['15', ''],
        ['16', ''],
        ['17', ''],
        ['18', ''],
        ['19', ''],
        ['20', ''],
        ['21', ''],
        ['22', ''],
        ['23', ''],
    ])

Answer 5

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

Dies behandelt auch Sonderzeichen.

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

Hier ist der Link zum funktionierenden jsfiddle.