Exporter le tableau au format CSV en JavaScript

Ce didacticiel montrera comment exporter des informations de tableau JavaScript vers un fichier CSV côté client.

Pour convertir les informations du tableau dans un fichier CSV, nous devons analyser correctement les données JavaScript au format CSV. Nous devons le stocker en tant qu’objet capable de gérer l’encodage et le format de données CSV.

Dans notre exemple, nous utilisons un tableau de tableaux pour stocker les données.

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

Nous stockons le contenu du tableau data vers l’objet csvContent. Nous créons des lignes de chaque tableau et les stockons dans un objet séparé.

Alternativement, nous pouvons utiliser le code suivant car il s’agit d’un moyen plus court d’obtenir le même résultat à l’aide des fonctions fléchées.

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 fonction map() appelle une fonction sur chaque élément du tableau et crée un nouveau tableau. La méthode join() joindra les composants du tableau existant à une chaîne à l’aide d’un séparateur. Dans notre cas, nous utilisons une virgule comme séparateur.

Pour télécharger et encoder l’objet CSV créé ci-dessus, nous utilisons le code suivant.

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

Nous allons maintenant exporter cet objet csvContent vers un fichier externe. Le EncodeURI est utilisé pour encoder l’URI. Cette fonction encode les caractères spéciaux à l’exception de (, / ? : @ & = + $) et renvoie une valeur de chaîne qui représente l’URI encodé.

Pour donner un nom particulier au fichier CSV, nous devons créer un nœud DOM caché et définir la fonction de téléchargement.

Ceci est fait ci-dessous.

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

La méthode setAttribute() ajoute une valeur d’attribut spécifique à l’élément donné. Dans le code ci-dessus, link.click() est utilisé pour télécharger pour télécharger directement le nom de fichier fourni dans la fonction link.setAttribute().

Si nous voulons que nos données soient insérées entre guillemets doubles, nous pouvons utiliser la fonction JSON.stringify() lors de la création de l’objet de données CSV.

Voir le code ci-dessous.

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

Production:

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