Kako izvoziti informacije o polju JavaScript v csv (na strani odjemalca)?

Vem, da je veliko vprašanj te vrste, vendar moram to storiti z uporabo JavaScript. Uporabljam Dojo 1.8 in imam vse podatke o atributih v polju, ki je videti takole:

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

Ali veste, kako lahko to izvozim v CSV na strani odjemalca?

Rešitev

To lahko storite v izvirnem jeziku JavaScript. Podatke boste morali razčleniti v pravilen format CSV (ob predpostavki, da za podatke uporabljate polje polj, kot ste opisali v vprašanju):

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

ali na krajši način (z uporabo arrow functions):

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

Nato lahko za prenos datoteke CSV uporabite funkciji window.open in encodeURI v jeziku JavaScript:

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

Uredi:

Če želite datoteki dati posebno ime, morate stvari narediti nekoliko drugače, saj to ni podprto pri dostopu do podatkovnega URI z uporabo metode `window.open`. Da bi to dosegli, lahko ustvarite skrito vozlišče `` DOM in mu nastavite atribut `download` na naslednji način:
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".
Komentarji (34)

Prišel sem sem, ker sem iskal nekaj več skladnosti z RFC 4180, a nisem našel implementacije, zato sem naredil (morda neučinkovito) implementacijo za lastne potrebe. Mislil sem, da jo bom delil z vsemi.

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

Upam, da bo to komu pomagalo v prihodnosti. To združuje tako kodiranje CSV skupaj z možnostjo prenosa datoteke. V mojem primeru na [jsfiddle](http://jsfiddle.net/a5E9m/2/). Datoteko lahko prenesete (ob predpostavki brskalnika HTML 5) ali si ogledate izhod v konzoli.

UPDATE:

Zdi se, da je Chrome zdaj izgubil možnost poimenovanja datoteke. Nisem prepričan, kaj se je zgodilo ali kako to popraviti, vendar kadar koli uporabim to kodo (vključno z jsfiddle), se prenesena datoteka zdaj imenuje download.csv.

Komentarji (3)

Rešitev iz @Default deluje odlično v Chromu (hvala za to!), vendar sem imel težave z IE.

Tukaj je rešitev (deluje na 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")
Komentarji (0)