Esporta array in CSV in JavaScript

Questo tutorial dimostrerà come esportare le informazioni dell’array JavaScript in un file CSV sul lato client.

Per convertire le informazioni dell’array in un file CSV, dobbiamo analizzare correttamente i dati JavaScript in formato CSV. Dobbiamo memorizzarlo come un oggetto in grado di gestire la codifica e il formato dei dati CSV.

Nel nostro esempio, usiamo un array di array per memorizzare i dati.

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];

let csvContent = 'data:text/csv;charset=utf-8,';

data.forEach(function(rowArray) {
  let row = rowArray.join(',');
  csvContent += row + '\r\n';
});

Archiviamo il contenuto dall’array data all’oggetto csvContent. Creiamo righe di ogni array e lo memorizziamo in un oggetto separato.

In alternativa, possiamo usare il seguente codice in quanto è un modo più breve per ottenere lo stesso risultato usando le funzioni freccia.

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];
let csvContent =
    'data:text/csv;charset=utf-8,' + data.map(e => e.join(',')).join('\n');

La funzione map() chiama una funzione su ogni elemento dell’array e crea un nuovo array. Il metodo join() unirà i componenti dell’array esistente a una stringa con l’aiuto di un separatore. Nel nostro caso, usiamo una virgola come separatore.

Per scaricare e codificare l’oggetto CSV sopra creato, utilizziamo il seguente codice.

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

Ora esporteremo questo oggetto csvContent in un file esterno. Il EncodeURI viene utilizzato per codificare l’URI. Questa funzione codifica caratteri speciali eccetto (, / ? : @ & = + $) e restituisce un valore stringa che rappresenta l’URI codificato.

Per dare un nome particolare al file CSV dobbiamo creare un nodo DOM nascosto e impostare la funzione di download.

Questo viene fatto di seguito.

var encodedUri = encodeURI(csvContent);
var link = document.createElement('a');
link.setAttribute('href', encodedUri);
link.setAttribute('download', 'my_data.csv');
document.body.appendChild(link);
link.click();

Il metodo setAttribute() aggiunge un valore di attributo specifico all’elemento dato. Nel codice sopra link.click() viene utilizzato per scaricare per scaricare direttamente il nome del file fornito nella funzione link.setAttribute().

Se vogliamo che i nostri dati vengano inseriti tra virgolette, possiamo utilizzare la funzione JSON.stringify() durante la creazione dell’oggetto dati CSV.

Vedi il codice qui sotto.

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];
var csv = data.map(function(d) {
                return JSON.stringify(d);
              })
              .join('\n')
              .replace(/(^\[)|(\]$)/mg, '');
console.log(csv);

Produzione:

"rahul" "delhi" "accounts"
"rajev" "UP"  "sales dept"