Hoe kan ik JavaScript array info exporteren naar csv (aan client kant)?

Ik weet dat er veel vragen van deze aard zijn, maar ik moet dit doen met behulp van JavaScript. Ik gebruik Dojo 1.8 en heb alle attribuut info in een array, die er als volgt uitziet:

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

Enig idee hoe ik dit kan exporteren naar CSV aan de client kant?

Springer F
Bewerkte vraag 2de0 september 2019 в 5:51
Programmering
csv client-side export javascript dojo-1.8
19de1 februari 2013 в 4:49
8 views
Oplossing

U kunt dit doen in native JavaScript. U'zult uw gegevens moeten parseren in het juiste CSV-formaat (ervan uitgaande dat u een array van arrays gebruikt voor uw gegevens zoals u in de vraag hebt beschreven):

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

of de kortere manier (met behulp van pijl functies):

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

Dan kun je JavaScript's window.open en encodeURI functies gebruiken om het CSV bestand als volgt te downloaden:

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

Edit:

Als je je bestand een specifieke naam wilt geven, moet je het een beetje anders doen, omdat dit niet wordt ondersteund bij het benaderen van een data URI met de `window.open` methode. Om dit te bereiken, kun je een verborgen `` DOM node maken en het `download` attribuut als volgt instellen: 
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".
isherwood
Bewerkt antwoord 29ste0 april 2019 в 4:20
Commentaren (34)

Ik kwam hier op zoek naar een beetje meer RFC 4180 conformiteit en ik slaagde er niet in een implementatie te vinden, dus maakte ik een (mogelijk inefficiënte) voor mijn eigen behoeften. Ik dacht dat ik het met iedereen zou delen.

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

Hopelijk kan dit in de toekomst iemand helpen. Dit combineert zowel de codering van de CSV samen met de mogelijkheid om het bestand te downloaden. In mijn voorbeeld op [jsfiddle](http://jsfiddle.net/a5E9m/2/). U kunt het bestand downloaden (uitgaande van een HTML 5 browser) of de uitvoer in de console bekijken.

UPDATE:

Chrome lijkt nu de mogelijkheid te hebben verloren om het bestand een naam te geven. Ik'ben niet zeker wat'is gebeurd of hoe het te repareren, maar telkens als ik deze code gebruik (inclusief de jsfiddle), is het gedownloade bestand nu genaamd download.csv.

Uxonith
Bewerkt antwoord 28ste2 mei 2014 в 4:39
Commentaren (3)

De oplossing van @Default werkt perfect in Chrome (hartelijk dank daarvoor!) maar ik had een probleem met IE.

Hier's een oplossing (werkt op 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")
Skip Jack
Bewerkt antwoord 26ste3 mei 2016 в 3:18
Commentaren (0)