Convertir un fichier CSV en LDIF

Version imprimable

13/11/2020, 11h43
Invité

Convertir un fichier CSV en LDIF

Bonjour à tous,

Je vous expose mon problème. J'aimerais coder une page web pour pouvoir retourner un fichier en format LDIF après avoir reçu un fichier au format CSV.

Le programme que je cherche à faire :
1. Récupérer un fichier CSV uploadé
2. Récupérer les cellules de ce fichier nécessaires à la complétion d'un nouveau fichier
3. Renvoyer ce fichier avec l'extension LDIF (dont j'ai le formatage)

Je ne sais pas si c'est faisable tout dans une seule page web ou s'il faudra plusieurs pages...
J'avoue que je me suis cogné à différentes méthodes sans succès...

Merci pour votre aide !
13/11/2020, 22h04
mathieu

vous pouvez certainement faire ça en JavaScript côté client ou en PHP par exemple côté serveur.
avez-vous déjà utilisé un de ces langages de programmation ?

Bonjour et merci pour la réponse rapide.

Je n'ai jamais utilisé ces langages de programmation. J'ai programmé il y a plus de vingt ans maintenant, donc j'ai de vieux souvenirs...
J'ai du mal à comprendre tout ce qui est fait par le code javascript.
Voilà tout de même ce que j'ai trouvé pour afficher le contenu d'un CSV sur la page html :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html> <head> </head> <body> <h1>Convertir un CSV en LDIF</h1> <input type="file" id="csv" name="csv"> <script type="text/javascript"> var fileInput = document.getElementById("csv"), readFile = function () { var reader = new FileReader(); reader.onload = function () { document.getElementById('out').innerHTML = reader.result; }; //Lecture du fichier, puis appel de function() reader.readAsBinaryString(fileInput.files[0]); }; fileInput.addEventListener('change', readFile); </script> <br> <br> <br> <output id="out">Le contenue du fichier apparaitra ici</output> </body> </html>
Maintenant comment récupérer des cellules précises (genre ligne 2 colonne 3) dans une variable en texte que je puisse ajouter dans un fichier.
J'ai compris qu'on pouvait écrire dans un fichier à retourner avec document.write(), mais là, on est limité par le nombre de lignes. Or, il en faudrait un bon 1000 lignes.

Merci pour votre accompagnement.

14/11/2020, 20h02
mathieu

c'est dans "reader.result" que vous obtenez le contenu du fichier CSV.
donc c'est à ce moment que vous pouvez traiter ces données et faire les découpages de la chaine pour récupérer l'information qui vous intéresse.

ensuite en JavaScript il est même possible de lancer une boite de dialogue "télécharger le fichier" qui vous permet par exemple d'enregistrer le fichier LDIF sur votre disque dur et économiser un copier-coller.

si vous voulez plus d'aide pour faire cela en JavaScript, je vous conseille d'aller sur le forum correspondant :
https://www.developpez.net/forums/f2...al-javascript/
14/11/2020, 20h28
Invité

Merci beaucoup.

Je poste sur le forum correspondant.

Bonne continuation.

Bonjour à tous,

Je vous expose mon problème. J'aimerais coder une page web pour pouvoir retourner un fichier en format LDIF après avoir reçu un fichier au format CSV.

Le programme que je cherche à faire :
1. Récupérer un fichier CSV uploadé
2. Récupérer les cellules de ce fichier nécessaires à la complétion d'un nouveau fichier
3. Renvoyer ce fichier avec l'extension LDIF (dont j'ai le formatage)

Je ne sais pas si c'est faisable tout dans une seule page web ou s'il faudra plusieurs pages...
J'avoue que je me suis cogné à différentes méthodes sans succès...

Voilà tout de même ce que j'ai trouvé pour afficher le contenu d'un CSV sur la page html :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html> <head> </head> <body> <h1>Convertir un CSV en LDIF</h1> <input type="file" id="csv" name="csv"> <script type="text/javascript"> var fileInput = document.getElementById("csv"), readFile = function () { var reader = new FileReader(); reader.onload = function () { document.getElementById('out').innerHTML = reader.result; }; //Lecture du fichier, puis appel de function() reader.readAsBinaryString(fileInput.files[0]); }; fileInput.addEventListener('change', readFile); </script> <br> <br> <br> <output id="out">Le contenue du fichier apparaitra ici</output> </body> </html>
Maintenant comment récupérer des cellules précises (genre ligne 2 colonne 3) dans une variable en texte que je puisse ajouter dans un fichier ?
J'ai compris qu'on pouvait écrire dans un fichier à retourner avec document.write(), mais là, on est limité par le nombre de lignes. Or, il en faudrait un bon 1000 lignes.

Merci pour votre accompagnement.

Bonjour,
ton fichier CSV est un fichier texte et tu peux récupérer directement les datas avec un

Code:

const datas = reader.result;

Concernant la conversion je pense qu'il est peut être plus aisé de passer par un objet JSON peut être plus simple à manipuler par la suite.

La fonction csvToJson, pourrait ressembler à :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function csvToJson(txt) { const SEPARATOR = ","; const EOL = /\r?\n/; const rowDatas = txt.split(EOL); // ligne 0 c'est l'entête const headerDatas = rowDatas.shift().split(SEPARATOR); // init keys de l'object JSON const jsonResult = {}; headerDatas.forEach((champ, ind) => { jsonResult[champ || "champ_" + ind] = []; }); // dispatch les autres les données rowDatas.forEach((data) => { const ligne = data.split(SEPARATOR); Object.keys(jsonResult).forEach((champ, ind) => { jsonResult[champ].push(ligne[ind] || ""); }); }); console.log("Result :", jsonResult); return jsonResult; }
je pense qu'il doit en exister des milliers sur la toile ...

Il ne te reste plus qu'à formater ta sortie en fonction de ton besoin.

Merci beaucoup pour ce code.
Néanmoins, je n'arrive pas à faire passer à la fonction csvToJson mes données.
Je les récupères avec const datas = reader.result;.

Puis, je fais passer "datas" dans le fonction.
Dans le débugger de Firefox, j'ai l'erreur suivante aux lignes 29 et 48 :

Citation:

Uncaught TypeError: txt is null

Je ne dois pas déclarer les choses comme il faut, où il faut, ...

Enfin mon code ressemble à ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
  <head>
    <h1>Convertir un CSV en LDIF</h1>
    <input type="file" id="csv" name="FichierCSV">
  </head>
  <body>
  </br>
  </br>
    <output id="out">Le contenu du fichier apparaitra ici</output>
 
    <script type="text/javascript">
    var fileIn = document.getElementById("csv"),
 
    //Fonction de lecture du fichier
    readFile = function () {
      var reader = new FileReader();
      const datas = reader.result;
      reader.onload = function () {
        //Affichage HTML
        document.getElementById('out').innerHTML = reader.result;
        };
      //lecture du fichier comme une chaine de caractères
      reader.readAsBinaryString(fileIn.files[0]);
 
      //conversion du CSV en objet JSON
      function csvToJson(txt) {
        const SEPARATOR = ";";
        const EOL = /\r?\n/;
        const rowDatas = txt.split(EOL);
        // ligne 0 c'est l'entête
        const headerDatas = rowDatas.shift().split(SEPARATOR);
        // init keys de l'object JSON
        const jsonResult = {};
        headerDatas.forEach((champ, ind) => {
          jsonResult[champ || "champ_" + ind] = [];
        });
        // dispatch les autres les données
        rowDatas.forEach((data) => {
          const ligne = data.split(SEPARATOR);
          Object.keys(jsonResult).forEach((champ, ind) => {
            jsonResult[champ].push(ligne[ind] || "");
          });
        });
        console.log("Result :", jsonResult);
        return jsonResult;
      };
    //appel de la fonction csvToJson
    csvToJson(datas);
    };
 
    //appel de fonction readFile
    fileIn.addEventListener('change',readFile);
  </script>
</body>
</html>

Je tâtonne énormément ;)

Merci encore pour votre aide.

19/11/2020, 15h41
NoSmoking
Citation:

Néanmoins, je n'arrive pas à faire passer à la fonction csvToJson mes données.

Tu ne l'utilises pas au bon moment.

Ta ligne :

Code:

const datas = reader.result;

... ne sert à rien, les données n'étant pas encore disponibles.

Il faut l'exécuter la fonction quand les données sont chargées donc :
Code:

1 2 3 4 5 6 reader.onload = function() { //Affichage HTML document.getElementById('out').innerHTML = reader.result; //appel de la fonction csvToJson csvToJson(reader.result); };
Autre chose, sort la fonction csvToJson(txt) du scope de readFile = function () {}, ce n'est pas sa place.

Ok, je commence à saisir des choses...

Le reader n'est accessible que dans la fonction puisqu'il est défini dedans, et le .onload se lance à la fin du chargement du fichier.

J'ai donc effectué les modifications. J'ai ajouté aussi des affichages pour comprendre un peu mieux ce qui se passe.

Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<html>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <head>
    <h1>Convertir un CSV en LDIF</h1>
      <input type="file" id="csv" name="FichierCSV">
  </head>
  <body>
    </br>
    <output id="out">Le contenu du fichier apparaitra ici</output>
  </br>
  </br>
    <script type="text/javascript">
    //Fonction de conversion du CSV en objet JSON
    function csvToJson(txt) {
      const SEPARATOR = ";";
      const EOL = /\r?\n/;
      const rowDatas = txt.split(EOL);
      // ligne 0 c'est l'entête
      const headerDatas = rowDatas.shift().split(SEPARATOR);
      // init keys de l'object JSON
      const jsonResult = {};
      headerDatas.forEach((champ, ind) => {
        jsonResult[champ || "champ_" + ind] = [];
      });
      // dispatch les autres les données
      rowDatas.forEach((data) => {
        const ligne = data.split(SEPARATOR);
        Object.keys(jsonResult).forEach((champ, ind) => {
          jsonResult[champ].push(ligne[ind] || "");
        });
      });
      console.log("Result :", jsonResult);
      document.getElementById("out").innerHTML ="</br>Type de jsonResult : " + typeof(jsonResult) + "</br>Contenu de jsonResult : " + jsonResult;
      return jsonResult;
    };
 
    //Récupération de l'élement importé
    var fileIn = document.getElementById("csv");
 
    // Déclaration d'un nouveau lecteur
    readFile = function () {
      var reader = new FileReader();
      var outString = "";
      //partie réalisée après le chargement du fichier
      reader.onload = function() {
        console.log("fichier chargé !")
        //lecture du fichier comme une chaine de caractères de l'élément importé
        reader.readAsBinaryString(fileIn.files[0]);
        //Récupération du format converti
        //csvToJson(reader.result);
        outString = JSON.stringify(csvToJson(reader.result));
      };
      console.log(outString);
      document.getElementById("out").innerHTML ="</br>Type de outString : " + typeof(outString) + "</br>Contenu de outString : " + outString;
    };
 
    //appel de fonction readFile
    fileIn.addEventListener('change',readFile);
 
 
 
  </script>
</body>
</html>

Problème... ma variable outString est <empty string> et je n'ai pas d'affichage de jsonResult...

Je bloque... j'ai du rater un truc mais je ne sais pas quoi. Il restera ensuite à extraire les données voulues dans le JSON. Mais avant ?

J'avance à petits pas, merci pour l'aide.

Attention tu synthétise mal.

Pour commencer supprime de la fonction csvToJson l'écriture dans ton élément HTML, la fonction fait la conversion et ne doit faire que cela.

Concernant la fonction readFile, je te la remets ci-dessous avec des mots clé
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 const readFile = function() { // CREATION d'un objet FileReader var reader = new FileReader(); // AFFECTATION : ce que l'on va faire quand les données seront chargées/disponibles reader.onload = function() { // CONVERSION des données reçues const outString = JSON.stringify(csvToJson(reader.result), null, 2); // AFFICHAGE résultat de la conversion document.getElementById("out").textContent = outString; }; // ensuite // DEMANDE de RECUPERATION des données reader.readAsBinaryString(fileIn.files[0]); };
Au passage les balises retour à la ligne s'écrive <br> et non </br>.

Au repassage pour l'affichage de données tel que celles-ci autant mettre un élément <pre> pour garder le format de sortie, donc

Code:

<pre id="out">Le contenu du fichier apparaitra ici</pre>

Enfin pour finir ton document HTML est invalide, il y a du mélange
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Convertir un CSV en LDIF</title> </head> <body> <h1>Convertir un CSV en LDIF</h1> <input type="file" id="csv" name="FichierCSV"> <br> <pre id="out">Le contenu du fichier apparaitra ici</pre> <script> // tu lmets le code ICI </script> </body> </html>
Voilà qui devrait te faire avancer.

Merci !!
Mon programme fonctionne maintenant.
J'ai dans ma console tout le contenu qu'il me faut pour le renvoyer à l'utilisateur. D'ailleurs voilà mon dernier problème...
J'ai ma variable const datas = jsonExtract(csvToJson(reader.result)); qui contient la chaine de caractère. Mais je n'arrive pas à la renvoyer dans un fichier en utilisant javascript. Ou alors faut repasser par la gestion html... je bloque.
D'ailleurs est-ce possible ?

Voilà mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Convertir un CSV en LDIF</title>
  </head>
  <body>
    <noscript>Pour utiliser ce site, merci d'activer JavaScript.</noscript>
    <h1>Convertir un CSV en LDIF</h1>
    <input type="file" id="csv" name="FichierCSV">
    <br>
    <pre id="out">Le contenu du fichier apparaitra ici</pre>
    <br>
    <script type="text/javascript">
 
    //Fonction de conversion du CSV en objet JSON
    function csvToJson(txt) {
      const SEPARATOR = ";";
      const EOL = /\r?\n/;
      const rowDatas = txt.split(EOL);
      // ligne 0 c'est l'entête
      const headerDatas = rowDatas.shift().split(SEPARATOR);
      // init keys de l'object JSON
      const jsonResult = {};
      headerDatas.forEach((champ, ind) => {
        jsonResult[champ || "FIN"] = [];
      });
      // dispatch les autres les données
      rowDatas.forEach((data) => {
        const ligne = data.split(SEPARATOR);
        Object.keys(jsonResult).forEach((champ, ind) => {
          jsonResult[champ].push(ligne[ind] || "");
        });
      });
      //console.log("Result :", jsonResult);
      return jsonResult;
    };
 
    //Fonction d'extraction des données du JSON
    function jsonExtract(jsonFile) {
      //définition données à remplacer dans la chaine de caractère
      var supp = /"/gi;
      //définition des variables récoltant chaque donnée
      var civ = "";
      var nom = "";
      var prenom = "";
      var mail = "";
      var telFix = "";
      var telTra = "";
      var telMob = "";
      var addRue = "";
      var addVil = "";
      var addCP = "";
      var addPays = "";
      //définition de la chaine à renvoyer
      var dataBack = "";
 
      //fonction pour compter le nombre d'entrées basé sur l'obligation que le nom du responsable soit rempli
      function countName(obj) {
        var l = 0;
        while (jsonFile['\"Nom responsable\"'][l] !== "") l++;
        return l;
      }
 
      //Tant que le nombre de nom compté n'est pas atteint on ajoute au fichier
      let n=0;
      while(n<countName(jsonFile)) {
        civ = jsonFile['\"Civilité Responsable\"'][n].replace(supp,'');
        nom = jsonFile['\"Nom responsable\"'][n].replace(supp,'');
        prenom = jsonFile['\"Prénom responsable\"'][n].replace(supp,'');
        mail = jsonFile['\"Courriel\"'][n].replace(supp,'');
        telFix = jsonFile['\"Téléphone domicile\"'][n].replace(supp,'');
        telTra =jsonFile['\"Téléphone travail\"'][n].replace(supp,'');
        telMob = jsonFile['\"Téléphone portable\"'][n].replace(supp,'');
        addRue = jsonFile['\"Adresse responsable\"'][n].replace(supp,'');
        addVil = jsonFile['\"Commune responsable\"'][n].replace(supp,'');
        addCP = jsonFile['\"CP responsable\"'][n].replace(supp,'');
        addPays = jsonFile['\"Pays\"'][n].replace(supp,'');
        //incrémentation du champ
        n++;
        //ajout des données à la chaine à retourner.
        dataBack = dataBack+"BEGIN:VCARD\n"
        +"VERSION:3.0\n"
        +"PROFILE:VCARD\n"
        +"FN:"+prenom+" "+nom+"\n"
        +"N:"+nom+";"+prenom+";;"+civ+";\n"
        +"TEL;TYPE=HOME,PREF:"+telFix+"\n"
        +"TEL;TYPE=WORK:"+telTra+"\n"
        +"TEL;TYPE=CELL:"+telMob+"\n"
        +"EMAIL;TYPE=INTERNET;TYPE=WORK;TYPE=PREF:"+mail+"\n"
        +"ADR;TYPE=HOME:;;"+addRue+";"+addVil+";;"+addCP+";"+addPays+"\n"
        +"END:VCARD\n\n";
      };
      return dataBack;
    };
 
    // PROGRAMME PRINCIPAL
    //Récupération de l'élement importé
    var fileIn = document.getElementById("csv");
    const readFile = function() {
        // CREATION d'un objet FileReader
        var reader = new FileReader();
        var XHR = new XMLHttpRequest();
        // AFFECTATION : ce que l'on va faire quand les données seront chargées/disponibles
        reader.onload = function() {
            // CONVERSION des données reçues
            const datas = jsonExtract(csvToJson(reader.result));
            //const outString = JSON.stringify(csvToJson(reader.result), null, 2);
            // AFFICHAGE HTML du résultat de la conversion
            //document.getElementById("out").textContent = outString;
            console.log(datas);
        };
        // ensuite
        // DEMANDE de RECUPERATION des données
        reader.readAsBinaryString(fileIn.files[0]);
    };
    //appel de fonction readFile
    fileIn.addEventListener('change',readFile);
 
 
  </script>
</body>
</html>

Merci encore pour toute cette aide, si je peux abuser encore un peu...

22/11/2020, 11h10
NoSmoking
Citation:

Mais je n'arrive pas à la renvoyer dans un fichier en utilisant javascript.

Il faudrait que tu précises ce que tu entends par envoyer dans un fichier, envoi vers serveur ou sauvegarde sur PC.
- Serveur = Ajax avec new XMLHttpRequest()
- Client = URL.createObjectURL(new Blob(text))
22/11/2020, 16h34
Invité

Ce serait une sauvegarde sur le PC de la personne qui utilise la page web.

Dans ce cas il te faut utiliser la solution : Client = URL.createObjectURL(new Blob(text)).

Cela pourrait ressembler à

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function saveFile(text) {
  const nomFichier = "nom-du-fichier.json";   /* par exemple mais pourrait être passé en paramètre */
  if (text.length) {
    const blob = new Blob([text]);
    const blobUrl = URL.createObjectURL(blob);
    // création d'un lien HTML5 download
    const lien = document.createElement("a");
    // affectation d'un nom du fichier
    lien.download = nomFichier;
    // affectation de l'adresse
    lien.href = blobUrl;
    // ajout de l'élément
    document.body.append(lien);
    // simulation du click
    lien.click();
    // suppression de l'élément devenu inutile
    lien.remove();
    URL.revokeObjectURL(blobUrl);
  }
}

Merci encore une fois pour ces réponses pertinentes et effectives.
Mon code fonctionne parfaitement.

Entre temps, j'ai trouvé cette fonction de qui permet la même chose (mais en plus long)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function download(strData, strFileName, strMimeType) {
      var D = document,
          A = arguments,
          a = D.createElement("a"),
          d = A[0],
          n = A[1],
          t = A[2] || "text/plain";
      //build download link:
      a.href = "data:" + strMimeType + "charset=utf-8," + escape(strData);
      if (window.MSBlobBuilder) { // IE10
          var bb = new MSBlobBuilder();
          bb.append(strData);
          return navigator.msSaveBlob(bb, strFileName);
      };
 
      if ('download' in a) { //FF20, CH19
          a.setAttribute("download", n);
          a.innerHTML = "downloading...";
          D.body.appendChild(a);
          setTimeout(function() {
              var e = D.createEvent("MouseEvents");
              e.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
              a.dispatchEvent(e);
              D.body.removeChild(a);
          }, 66);
          return true;
      };
 
      //do iframe dataURL download: (older W3)
      var f = D.createElement("iframe");
      D.body.appendChild(f);
      f.src = "data:" + (A[2] ? A[2] : "application/octet-stream") + (window.btoa ? ";base64" : "") + "," + (window.btoa ? window.btoa : escape)(strData);
      setTimeout(function() {
          D.body.removeChild(f);
      }, 333);
      return true;
    };

J'ai toutefois un problème avec les caractères accentués avec ce code.
Mais serait-il plus compatible avec tous les navigateurs ?

Citation:

Mais serait-il plus compatible avec tous les navigateurs ?

Là tu touches un point sensible !

Tous les codes que je t'ai fournis fonctionnent sur des navigateurs modernes donc pas sur IE :aie:

La raison principale est que IE ne connaît pas les fonctions fléchées mais pour cela il te suffit de modifier la syntaxe (param) => {/*le code */} par function (param) {/* le code */}.

Concernant la fonction de sauvegarde, je dirais qu'il suffit d'ajouter un test, c'est deux lignes :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 function saveFile(text) { const nomFichier = "nom-du-fichier.json"; /* par exemple mais pourrait être passé en paramètre */ if (text.length) { const blob = new Blob([text]); // pour IE10-11 c'est simple !!! if (navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob( blob, nomFichier); } else { const blobUrl = URL.createObjectURL(blob); // création d'un lien HTML5 download const lien = document.createElement("a"); // affectation d'un nom du fichier lien.download = nomFichier; // affectation de l'adresse lien.href = blobUrl; // ajout de l'élément document.body.append(lien); // simulation du click lien.click(); // suppression de l'élément devenu inutile lien.remove(); URL.revokeObjectURL(blobUrl); } } }
Citation:

J'ai toutefois un problème avec les caractères accentués avec ce code.

prend l'habitude de travailler en UTF-8 en mettant en entête de fichier un <meta charset="UTF-8">, après si c'est le fichier d'origine qui te pose problème c'est une autre histoire.

23/11/2020, 20h09
Invité

Merci encore pour tous ces conseils. Le programme est opérationnel.
Bonne continuation.