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

Hier ist, wie ich CSV-Dateien auf der Client-Seite in meiner Java GWT-Anwendung herunterlade. Ein besonderer Dank geht an Xavier John für seine Lösung. Es wurde überprüft, dass es in FF 24.6.0, IE 11.0.20 und Chrome 45.0.2454.99 (64-Bit) funktioniert. Ich hoffe, das spart jemandem etwas Zeit:

public class ExportFile 
{

    private static final String CRLF = "\r\n";

    public static void exportAsCsv(String filename, List> data) 
    {
        StringBuilder sb = new StringBuilder();
        for(List row : data) 
        {
            for(int i=0; i0) 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-Erkennung
            { 
                // Browser, die das HTML5-Download-Attribut unterstützen
                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);
            }
        }
    }-*/;
}

Answer 2

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

Answer 3

Die oben genannten Antworten funktionieren, aber beachten Sie, dass wenn Sie im .xls-Format öffnen, Spalten möglicherweise durch '\t' statt durch ',' getrennt sind, die Antwort https://stackoverflow.com/a/14966131/6169225 hat gut für mich funktioniert, solange ich .join('\t') anstatt von .join(',') verwendet habe.

Answer 4

Ich verwende diese Funktion, um ein string[][] in eine CSV-Datei umzuwandeln. Es wird eine Zelle in Anführungszeichen gesetzt, wenn sie ein ", ein , oder anderes Leerzeichen (außer Leerzeichen) enthält:

/**
 * Nimmt ein Array von Arrays und gibt eine durch `,` getrennte CSV-Datei zurück.
 * @param {string[][]} tabelle
 * @returns {string}
 */
function toCSV(tabelle) {
    return tabelle
        .map(function(zeile) {
            return zeile
                .map(function(zelle) {
                    // Wir entfernen Leerzeichen und prüfen, ob die Spalte
                    // anderes Leerzeichen, `,` oder `"` enthält.
                    // In diesem Fall müssen wir die Spalte in Anführungszeichen setzen.
                    if (zelle.replace(/ /g, '').match(/[\s,"]/)) {
                        return '"' + zelle.replace(/"/g, '""') + '"';
                    }
                    return zelle;
                })
                .join(',');
        })
        .join('\n'); // oder '\r\n' für Windows
}

Hinweis: Funktioniert nicht in Internet Explorer < 11, es sei denn map ist polyfilled.

Hinweis: Wenn die Zellen Zahlen enthalten, können Sie zelle=''+zelle vor if (zelle.replace... hinzufügen, um Zahlen in Zeichenfolgen umzuwandeln.

Oder du kannst es in einer Zeile mit ES6 schreiben:

tabelle.map(z=>z.map(s=>s.replace(/ /g, '').match(/[\s,"]/)?'"'+s.replace(/"/g,'""')+'"':s).join(',')).join('\n')

Answer 5

Laden Sie die CSV-Datei herunter

  let csvContent = "data:text/csv;charset=utf-8,";
  rows.forEach(function (rowArray) {
    for (var i = 0, len = rowArray.length; i < len; i++) {
      if (typeof (rowArray[i]) == 'string')
        rowArray[i] = rowArray[i].replace(/<(?:.|\n)*?>/gm, '');
      rowArray[i] = rowArray[i].replace(/,/g, '');
    }

    let row = rowArray.join(",");
    csvContent += row + "\r\n"; // füge Zeilenumbruch hinzu
  });
  var encodedUri = encodeURI(csvContent);
  var link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "fileName.csv");
  document.body.appendChild(link);
  link.click();