Retour aux articles

Comment exporter une base de donnée en fichier CSV avec Javascript ?

Exporter une base de donnée en CSV en utilisant Javascript
7 minutes de lecture- 65 vues

Transformer un fichier CSV en JSON avec NodeJSHeader Icon

J'ai récemment eu besoin de manipuler des données CSV avec NodeJS. Dans cet article, je vous propose de convertir les données d'une API en fichier CSV. J'utilise l'exemple d'une API, mais vous pouvez utiliser des données provenant d'une base de données.

Nous utiliserons csv-stringify qui répond totalement à notre besoin.

Pré-requisHeader Icon

Configurer notre projet NodeJSHeader Icon

Nous allons générer une nouvelle application node.js afin de pouvoir installer la librairie csv-stringify. Pour ce faire, ouvrez votre terminal dans un dossier vite, et entez la commande suivante. Cela va créer un fichier package.json.

Terminal

_10
mkdir json-to-csv # Commande optionnelle pour créer un nouveau dossier vide
_10
cd json-to-csv # Commande optionnelle pour entrer dans le dossier créé
_10
npm init -y

Il faut également modifier le fichier package.json et y copier la ligne "type":"module".

Voici à quoi ressemble un fichier bien configuré :

package.json

_14
{
_14
"name": "json-to-csv",
_14
"version": "1.0.0",
_14
"description": "",
_14
"main": "index.js",
_14
"type": "module",
_14
"scripts": {
_14
"test": "echo \"Error: no test specified\" && exit 1"
_14
},
_14
"keywords": [],
_14
"author": "",
_14
"license": "ISC",
_14
"dependencies": {}
_14
}

Nous avons terminé la configuration. Nous pouvons maintenant créer un nouveau fichier server.js qui va contenir le code source. Je vous conseille de l'ouvrir avec votre éditeur de code préféré (je recommande d'utiliser VSCode).

Récupération de la donnée APIHeader Icon

Pour pouvoir transformer notre donnée, nous devons d'abord la récupérer. J'utilise le site JSON Placeholder qui met à disposition des fausses données destinées à prototyper des projets.

Nous allons écrire une première fonction afin de récupérer une liste de posts grâce à la librairie fetch de Node. J'appelle ma fonction getPosts, elle est asynchrone et va utiliser fetch pour récupérer nos données depuis JSON Placeholder.

Si vous utilisez la version 18 de Node ou supérieur, la librairie fetch est maintenant implémentée par défaut.

J'utilise la version 16.7, et la librairie fetch n'est pas native à Node.JS. Nous devons la télécharger et l'importer dans notre application. Ouvrez votre terminal, et lancez la commande suivante :

Terminal

_10
npm install node-fetch

Il suffit maintenant d'importer fetch à l'intérieur du fichier server.js.

server.js

_15
import fetch from 'node-fetch'; /* La librairie fetch n'est pas native à NodeJS dans la version 16.7 */
_15
_15
export const getPosts = async () => {
_15
/* Requête AJAX permettant de récupérer nos données */
_15
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
_15
/* Nous convertissons la réponse en JSON */
_15
const posts = await response.json();
_15
/* Nous vérifions la récupération de notre donnée */
_15
console.log(posts);
_15
/* Nous renvoyons un tableau de posts */
_15
return posts;
_15
};
_15
_15
// N'oublions pas d'appeler la méthode pour s'assurer qu'elle fonctionne !
_15
getPosts();

Après avoir sauvegardé notre fichier, nous allons exécuter le code avec la commande node server.js. Nous devrions voir un tableau de posts dans notre terminal. Cela signifie que le projet est bien configuré !

Création de notre première route avec ExpressJSHeader Icon

Nous voulons pouvoir télécharger un fichier CSV depuis notre navigateur. Nous allons mettre en place plusieurs routes avec le serveur ExpressJS. Pour ce faire il suffit d'installer la librarie. Entrez la commande suivante dans votre invité de commande :

Terminal

_10
npm i express

Express nous permet de définir des routes pour accéder à nos données sous forme d'API. Une route est un chemin d'accès qui associe une URL et une méthode à une action spécifique de l'application. Nous allons tout de suite créer notre première route /posts en GET pour pouvoir y accéder avec notre navigateur à l'adresse localhost:3000/posts.

La documentation officielle d'Express nous donne une base de code à exploiter. Nous allons le modifier légèrement.

server.js

_10
import express from 'express';
_10
const app = express();
_10
_10
app.get('/posts', async function (req, res) {
_10
const posts = await getPosts();
_10
res.send(posts);
_10
});
_10
_10
app.listen(3000);

Ci-dessus, nous importons la librarie express.

  • Nous créons une instance d'express dans la variable app.
  • Nous créons ensuite une route de type GET, à l'URL /posts
  • La fonction de rappel est asynchrone. Nous devons attendre de récupérer les données depuis notre API avant de pouvoir les traiter
  • Nous renvoyons la donnée telle quel sous forme de réponse avec la ligne res.send(posts);.
  • Nous demandons finalement à Express d'écouter les requêtes sur le port 3000

Nous pouvons modifier notre fichier server.js en conséquence :

server.js

_16
import express from 'express';
_16
const app = express();
_16
_16
app.get('/posts', async function (req, res) {
_16
const posts = await getPosts();
_16
res.send(posts);
_16
});
_16
_16
app.listen(3000);
_16
_16
export const getPosts = async () => {
_16
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
_16
_16
const posts = await response.json();
_16
return posts;
_16
};

Convertir la donnée en CSVHeader Icon

Présentation de csv-stringifyHeader Icon

Nous venons de créer notre première route avec Express ! Mais cela ne répond pas encore à notre besoin. Nous souhaitons télécharger un fichier au format CSV correspondant à notre modèle de données. Nous avons besoin de télécharger une librairie supplémentaire pour effectuer la conversion. Nous pouvons installer csv-stringify dans notre terminal avec la commande suivante :

Terminal

_10
npm i csv-stringify

Une fois installé, il est important de relancer notre serveur Express. La documentation officielle de csv-stringify nous donne une base de code suffisante pour notre besoin :

server.js

_10
import { stringify } from 'csv-stringify/sync';
_10
_10
const output = stringify([
_10
['1', '2', '3', '4'],
_10
['a', 'b', 'c', 'd'],
_10
]);

Il suffit d'importer la méthode stringify depuis csv/stringify/sync et de passer en paramètre un tableau de données. Une fois les données converties au format csv, nous devons les renvoyer à l'utilisateur grâce à une nouvelle route Express.

Création d'une nouvelle routeHeader Icon

En dessous de notre première route, nous allons déclarer une deuxième route qui sera liée à l'URL /posts/csv.

server.js

_15
app.get('/posts/csv', async function (req, res) {
_15
const posts =
_15
await getPosts(); /* Récupération des données depuis notre API */
_15
/* Conversion de notre object clé-valeur en ligne au format CSV */
_15
const postsInCsv = stringify(posts, {
_15
header: true,
_15
});
_15
_15
/* L'en-tête Content-Type permet d'informer le navigateur du type de contenu */
_15
res.setHeader('Content-Type', 'text/csv');
_15
/* L'en-tête Content-Disposition permet de choisir la disposition de contenu : sous forme de page, ou sous forme de fichier */
_15
res.setHeader('Content-Disposition', 'attachment; filename=posts.csv');
_15
_15
res.send(postsInCsv);
_15
});

Revenons sur le code ci-dessus :

  • Nous déclarons une nouvelle route à l'URL /posts/csv avec la méthode GET
  • La fonction de rappel est asynchrone
  • Nous obtenons la donnée de posts depuis l'API, que nous sauvegardons dans une variable post avec l'instruction const posts = await getPosts()
  • Nous utilisons csv-stringify pour convertir notre object clé-valeur en valeurs séparées par des virgules.
  • La méthode stringify accepte un premier paramètre qui sera notre donnée de posts, et un tableau optionnel d'options. Nous souhaitons afficher l'en-tête dans le fichier CSV. Par défaut, l'en-tête sera les clés de notre object clé-valeur.
  • Avant de renvoyer la réponse au navigateur, nous spécifions un type de contenu grâce à l'en-tête Content-Type qui prend la valeur text/csv
  • L'en-tête Content-Disposition permet de changer la disposition du contenu : Accéder à la route ne va pas afficher une page, mais va à la place télécharger un fichier posts.csv
  • Nous pouvons ensuite renvoyer la réponse

Code completHeader Icon

Voici le code complet que nous venons de développer :

server.js

_30
import fetch from 'node-fetch';
_30
import { stringify } from 'csv-stringify/sync';
_30
import express from 'express';
_30
const app = express();
_30
_30
app.get('/posts', async function (req, res) {
_30
const posts = await getPosts();
_30
res.send(posts);
_30
});
_30
_30
app.get('/posts/csv', async function (req, res) {
_30
const posts = await getPosts();
_30
_30
const postsInCsv = stringify(posts, {
_30
header: true,
_30
});
_30
_30
res.setHeader('Content-Type', 'text/csv');
_30
res.setHeader('Content-Disposition', 'attachment; filename=posts.csv');
_30
_30
res.send(postsInCsv);
_30
});
_30
app.listen(3000);
_30
_30
export const getPosts = async () => {
_30
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
_30
_30
const posts = await response.json();
_30
return posts;
_30
};

En résumé, nous avons chargé des données API avec JSONPlaceholder. Nous avons eu besoin d'installer la librairie fetch qui n'est pas native avant la version 18 de NodeJS. Nous utilisons la librairie ExpressJS pour créer des routes afin d'accéder à nos données depuis le navigateur. Nous transformons nos données JSON au format CSV avec la librairie csv-stringify, que nous renvoyons ensuite au navigateur au format CSV. Nous donnons l'instruction au navigateur de télécharger le fichier avec l'en-tête Content-Disposition.

Nous avons réussi la conversion de notre donnée d'API JSON en fichier CSV téléchargeable !

J'espère que ce guide vous a été utile. Merci aux contributeurs du projet qui proposent également d'autres librairies, permettant de manipuler davantage de fichiers CSV.

Articles similaires
Formation NestJS 2024
7 minutes de lecture - 204 vuesNestJSNodeJS

Créer un serveur API avec NestJS : le guide ultime

Découvre comment utiliser NestJS, un puissant framework NodeJS. Il donne une base de code solide pour développer un serveur API en NodeJS. Il inclut générateur de projet pré-configuré, Typescript, Prettier, Eslint et Docker.

Je récupère les données d'une API pour les transformer en fichier CSV
7 minutes de lecture - 94 vuesNodeJS

Transformer des données d'API en CSV avec NodeJS

Les fichiers CSV représentent un format de donnée très courant sur internet. Dans cet article, nous allons lire et convertir les données d'une API JSON vers un fichier CSV téléchargable avec Node.JS

Rejoins la

newsletter