Sélectionner un fichier local XML et l'enregistrer au format GEXF après traitement

**Pal31** · 11/03/2019, 20h39

Bonjour,
Je cherche à sélectionner mon fichier XML, lancer la transformation et l'enregistrer au format GEXF.

Pour cela en cherchant j'ai trouvé une fonction réalisée par Watilin sur cette discussion:

https://www.developpez.net/forums/d1...ml-javascript/

je vous poste sa fonction

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Ouvrir, modifier, enregistrer un fichier</title>
  <style>
 
  textarea {
    display: block;
    border: solid thin #6cf;
    padding: 1px;
    width: 100%;
    max-height: 24em;
    overflow: auto;
  }
 
  </style>
</head>
<body>
 
<input type="file" />
 
<script> "use strict";
 
const regex = /<content>\s*{Nom_produit}\s*<\/content>/g;
 
function highlightText($textarea) {
  $textarea.focus();
  let match = regex.exec($textarea.value);
  if (match) {
    let j = regex.lastIndex;
    let i = j - match[0].length;
    $textarea.setSelectionRange(i, j);
    regex.lastIndex = 0;
  }
}
 
document.querySelector("input[type=file]")
  .addEventListener("change", (event) => {
    let file = event.target.files[0];
    if (!file) {
      console.log("Aucun fichier sélectionné");
      return;
    }
    else {
      console.log(file);
      let reader = new FileReader();
 
      reader.onload = () => {
        let $ta = document.querySelector("textarea");
        let $button = document.querySelector("button");
        if (!$ta) {
          $ta = document.createElement("textarea");
          $ta.cols = 80;
          $ta.rows = 15;
          $button = document.createElement("button");
          $button.textContent = "Enregistrer";
 
          document.body.append($ta, $button);
 
          $button.onclick = () => {
            let blob = new Blob([ $ta.value ], { type: "text/xml" });
            let blobUrl = URL.createObjectURL(blob);
 
            let $a = document.createElement("a");
            $a.download = file.name;
            $a.href = blobUrl;
 
            document.body.append($a);
            $a.click();
            $a.remove();
            URL.revokeObjectURL(blobUrl);
          };
        }
 
        $ta.value = reader.result;
        highlightText($ta);
      };
 
      reader.readAsText(file);
    }
  });
 
</script>
</body>
</html>

Je vais l'étudier pour voir si je peux l'adapter à mon besoin car c'est exactement le principe que je recherche d'ouverture de document, et d'enregistrement.
Je pense qu'il faudrait modifier le principe d'édition du document pour qu'il soit fait automatiquement par les fonctions appelées par le script, et le principe d'enregistrement, qu'il ne soit pas au format XML mais au format GEXF.

Je vous poste mon script qui récupère les informations de mon fichier XLM et qui me recréer mon fichier à enregistrer au format GEXF:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Lecture arborescence fichier XML</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d1946638">
<meta name="DVP-version" content="2.0">
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.25 Verdana,sans-serif;
}
main {
  display: block;
  margin: 0 auto;
  padding: 0;
  max-width: 60em;
}
h1, h2, h3 {
  margin: .5em 0;
  color: #069;
}
pre {
  margin: 0 0 .5em;
  border: 1px solid #CCC;
  text-shadow: 1px 1px 0 #FFF;
  background: #EEE;
  white-space: pre-wrap;
}
</style>
</head>
<body>
<main>
  <header>
    <h1>Résultat récursif</h1>
  </header>
  <section>
    <h2>Résultat</h2>
    <pre id="result"></pre>
  </section>
  <section>
    <h2>Ressources</h2>
    <p><a href="https://gephi.org/gexf/format/index.html">https://gephi.org/gexf/format/index.html</a></p>
  </section>
</main>
<script>
"use strict";
/* si utilisé avec innerHTML
var TAB = "&nbsp;&nbsp;";
var CR =  "<br>";
var LT =  "&lt;";
*/
/* si utilisé avec textContent */
var TAB = "    ";
var CR =  "\n";
 
/**
 * Gestion des relations pour <edges>
 */
var IDRelation = {
  indice: 0,
  edge: [],
  getID: function(idxParent, elem) {
    var previousId = this.indice;             // id précédente
    this.indice += 1;
    // stoquage donnée
    this.edge.push({
       "id": previousId
      ,"source": idxParent
      ,"target": this.indice
      ,"sourceTag": elem.parentNode.tagName   // pour vérif
      ,"targetTag": elem.tagName              // pour vérif
    });
    return (this.indice);
  }
};
/**
 * version 2.0
 */
function getNodes(elem, indent, indiceParent) {
  var retour = "";
  var children = elem.childNodes;
  var nbChildren = children.length;
  var child;
  var id;
  var i;
 
  for (i = 0; i < nbChildren; i += 1) {
    child = children[i];
    // si élément est de type ELEMENT_NODE
    if (1 === child.nodeType) {
      // récup. ID et mise à jour table liaison
      id = IDRelation.getID(indiceParent, child);
      // si des enfants
      if (child.childElementCount) {
        // prise en compte du tagName
        retour += indent + TAB + '<node id="' + id + '" label="' + child.tagName + '">' + CR;
        retour += indent + TAB + '</node>' + CR;
        // on y retourne pour la suite
        retour += getNodes(child, indent, id /* indiceParent */ );
      }
      else {
        // récup. attributes si existent pour affichage
        if (child.hasAttributes()) {
          var attrs = child.attributes;
          var item;
          var text = [];
          for (item = 0; item < attrs.length; item += 1) {
            text.push(attrs[item].name + " = " + attrs[item].value);
          }
          child.textContent = text.join(", ");
        }
        retour += indent + TAB + '<node id="' + id + '" label="' + child.tagName + '">' + CR;
        retour += indent + TAB + TAB + "<attvalues>" + CR;
        retour += indent + TAB + TAB + TAB + '<attvalue for="0" value="' + child.textContent + '"/>' + CR;
        retour += indent + TAB + TAB + '</attvalues>' + CR;
        retour += indent + TAB + '</node>' + CR;
      }
    }
    else {
      /* on ne fait rien */
    }
  }
  // fin balise si existe
  //var endTag = elem.tagName ? (indent.substring(TAB.length) + LT +"/" + elem.tagName + ">" + CR) : "";
  return retour;
}
 
/* Création de l'entête du document GEXF */
function getEntete(indent) {
  indent = indent || '';
  var text = [];
  text.push('<?xml version="1.0" encoding="UTF-8"?>');
  text.push('<gexf xmlns="http://www.gexf.net/1.2draft" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.gexf.net/1.2draft http://www.gexf.net/1.2draft/gexf.xsd" version="1.2">');
  text.push(indent + TAB + '<graph defaultedgetype="directed">');
  text.push(indent + TAB + TAB + '<attributes class="node">');
  text.push(indent + TAB + TAB + TAB + '<attribute id="0" title="Value" type="string"/>');
  text.push(indent + TAB + TAB + TAB + '<default>true</default>');
  text.push(indent + TAB + TAB + '</attributes>');
  return text.join(CR);
}
function getEdges(indent) {
  indent = indent || '';
  var data = IDRelation.edge;
  var text = [indent + '<edges>'];
  data.shift();                         // supprime le premier non concerné
  data.forEach(function(obj, ind) {
    text.push(indent + TAB + '<edge id="' + obj.id + '" source="' + obj.source + '" target="' + obj.target + '"/>');
    //text.push(indent + TAB + '<edge id="' + obj.id + '" source="' + obj.sourceTag + '" target="' + obj.targetTag + '"/>');
  });
  text.push(indent + '</edges>');
  return text.join(CR);
}
/* Fermeture des balises <graph> et <gexf> */
function getEmpied(indent) {
  indent = indent || '';
  var text = [];
  text.push(indent + TAB + '</graph>');
  text.push(indent + '</gexf>');
  return text.join(CR);
}
/**
 *
 */
function fctCallBack(xml) {
  var xmlDoc = xml.responseXML;
  var indent = TAB + TAB;
  var text = [];;
  text.push(getEntete());
  text.push(indent + "<nodes>" + CR + getNodes(xmlDoc, indent) + indent + "</nodes>");
  text.push(getEdges(indent));
  text.push(getEmpied());
  document.getElementById("result").textContent = text.join(CR);
}
 
/**
 * c'est parti ...
 */
var url = "data-XML.xml";       // mettre ici ton url
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (4 === this.readyState) {  /* DONE */
    if (200 === this.status) {  /* LOADING */
      fctCallBack(this);
    }
    else {
      console.warn("Erreur %d lors du chargement du fichier %s !", this.status, url);
    }
  }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
</script>
</body>
</html>

Pensez vous qu'il est possible de combiner les deux scripts pour n'en faire qu'un seul. Je continuerai à analyser le script Watilin demain matin.
Merci d'avance.

**Pal31** · 12/03/2019, 10h49

Bonjour,
J'essaye désespéramment de faire un mixe des 2 scripts, je ne trouve pas encore la solution.
Je précise je ne suis pas développeur, j'apprends sur le tas avec les conseils et les indications que je reçois.

Voici le code:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Ouvrir, modifier, enregistrer un fichier</title>
  <style>
 
  textarea {
    display: block;
    border: solid thin #6cf;
    padding: 1px;
    width: 100%;
    max-height: 24em;
    overflow: auto;
  }
 
  </style>
</head>
<body>
    <input type="file" />
 
<script>"use strict";
 
/* si utilisé avec innerHTML
var TAB = "&nbsp;&nbsp;";
var CR =  "<br>";
var LT =  "&lt;";
*/
/* si utilisé avec textContent */
var TAB = "    ";
var CR =  "\n";
 
/**
 * Gestion des relations pour <edges>
 */
var IDRelation = {
  indice: 0,
  edge: [],
  getID: function(idxParent, elem) {
    var previousId = this.indice;             // id précédente
    this.indice += 1;
    // stoquage donnée
    this.edge.push({
       "id": previousId
      ,"source": idxParent
      ,"target": this.indice
      ,"sourceTag": elem.parentNode.tagName   // pour vérif
      ,"targetTag": elem.tagName              // pour vérif
    });
    return (this.indice);
  }
};
/**
 * version 2.0
 */
function getNodes(elem, indent, indiceParent) {
  var retour = "";
  var children = elem.childNodes;
  var nbChildren = children.length;
  var child;
  var id;
  var i;
 
  for (i = 0; i < nbChildren; i += 1) {
    child = children[i];
    // si élément est de type ELEMENT_NODE
    if (1 === child.nodeType) {
      // récup. ID et mise à jour table liaison
      id = IDRelation.getID(indiceParent, child);
      // si des enfants
      if (child.childElementCount) {
        // prise en compte du tagName
        retour += indent + TAB + '<node id="' + id + '" label="' + child.tagName + '">' + CR;
        retour += indent + TAB + '</node>' + CR;
        // on y retourne pour la suite
        retour += getNodes(child, indent, id /* indiceParent */ );
      }
      else {
        // récup. attributes si existent pour affichage
        if (child.hasAttributes()) {
          var attrs = child.attributes;
          var item;
          var text = [];
          for (item = 0; item < attrs.length; item += 1) {
            text.push(attrs[item].name + " = " + attrs[item].value);
          }
          child.textContent = text.join(", ");
        }
        retour += indent + TAB + '<node id="' + id + '" label="' + child.tagName + '">' + CR;
        retour += indent + TAB + TAB + "<attvalues>" + CR;
        retour += indent + TAB + TAB + TAB + '<attvalue for="0" value="' + child.textContent + '"/>' + CR;
        retour += indent + TAB + TAB + '</attvalues>' + CR;
        retour += indent + TAB + '</node>' + CR;
      }
    }
    else {
      /* on ne fait rien */
    }
  }
  // fin balise si existe
  //var endTag = elem.tagName ? (indent.substring(TAB.length) + LT +"/" + elem.tagName + ">" + CR) : "";
  return retour;
}
 
/* Création de l'entête du document GEXF */
function getEntete(indent) {
  indent = indent || '';
  var text = [];
  text.push('<?xml version="1.0" encoding="UTF-8"?>');
  text.push('<gexf xmlns="http://www.gexf.net/1.2draft" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.gexf.net/1.2draft http://www.gexf.net/1.2draft/gexf.xsd" version="1.2">');
  text.push(indent + TAB + '<graph defaultedgetype="directed">');
  text.push(indent + TAB + TAB + '<attributes class="node">');
  text.push(indent + TAB + TAB + TAB + '<attribute id="0" title="Value" type="string"/>');
  text.push(indent + TAB + TAB + TAB + '<default>true</default>');
  text.push(indent + TAB + TAB + '</attributes>');
  return text.join(CR);
}
function getEdges(indent) {
  indent = indent || '';
  var data = IDRelation.edge;
  var text = [indent + '<edges>'];
  data.shift();                         // supprime le premier non concerné
  data.forEach(function(obj, ind) {
    text.push(indent + TAB + '<edge id="' + obj.id + '" source="' + obj.source + '" target="' + obj.target + '"/>');
    //text.push(indent + TAB + '<edge id="' + obj.id + '" source="' + obj.sourceTag + '" target="' + obj.targetTag + '"/>');
  });
  text.push(indent + '</edges>');
  return text.join(CR);
}
/* Fermeture des balises <graph> et <gexf> */
function getEmpied(indent) {
  indent = indent || '';
  var text = [];
  text.push(indent + TAB + '</graph>');
  text.push(indent + '</gexf>');
  return text.join(CR);
}
/**
 *
 */
function fctCallBack(xml) {
  var xmlDoc = xml.responseXML;
  var indent = TAB + TAB;
  var text = [];
  text.push(getEntete());
  text.push(indent + "<nodes>" + CR + getNodes(xmlDoc, indent) + indent + "</nodes>");
  text.push(getEdges(indent));
  text.push(getEmpied());
  document.getElementById("result").textContent = text.join(CR);
}
 
/**
 * c'est parti ...
 */
 
const regex = /<content>\s*{Nom_produit}\s*<\/content>/g;
 
function highlightText($textarea) {
  $textarea.focus();
  let match = regex.exec($textarea.value);
  if (match) {
    let j = regex.lastIndex;
    let i = j - match[0].length;
    $textarea.setSelectionRange(i, j);
    regex.lastIndex = 0;
  }
}
 
document.querySelector("input[type=file]")
  .addEventListener("change", (event) => {
    let file = event.target.files[0];
    if (!file) {
      console.log("Aucun fichier sélectionné");
      return;
    }
    else {
      console.log(file);
      let reader = new FileReader();
 
      reader.onload = () => {
        let $ta = document.querySelector("textarea");
        let $button = document.querySelector("button");
        if (!$ta) {
          $ta = document.createElement("textarea");
          $ta.cols = 80;
          $ta.rows = 15;
          $button = document.createElement("button");
          $button.textContent = "Enregistrer";
 
          document.body.append($ta, $button);
 
          $button.onclick = () => {
            let blob = new Blob([ $ta.value ], { type: "text/gexf" });
            let blobUrl = URL.createObjectURL(blob);
 
            let $a = document.createElement("a");
            $a.download = file.name;
            $a.href = blobUrl;
 
            document.body.append($a);
            $a.click();
            $a.remove();
            URL.revokeObjectURL(blobUrl);
          };
        }
 
        $ta.value = reader.result;
        highlightText($ta);
      };
 
      reader.readAsText(file);
    }
  });
</script>
</body>
</html>

Je pense qu'il faudrait que j'appelle ma fonction function fctCallBack(xml) dans la fonction document.querySelector("input[type=file]") pour arriver à mes fins, seulement je n'arrive pas à trouver où la placer.
Le fait que ce soit modifiable n'est pas un problème, au contraire car avant enregistrement, s'il y a une erreur cela me permettrait de modifier le nouveau code.
Je vais essayer de continuer sur cette piste en attendant une réponse.

Après en utilisant cette fonction (document.querySelector("input[type=file]")) je ne sais pas comment modifier l'extension du fichier enregistré, si quelqu'un a une idée, je suis preneur.
Merci d'avance

**NoSmoking** · 12/03/2019, 14h05

Bonjour,

il faut que tu appelles effectivement dans ta « function Watilin » et lui passer le texte récupéré

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

fctCallBack(reader.result);

attention dans ce cas li faut modifier la fonction fctCallBack car il faut que tu travailles sur un document XML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function fctCallBack(xml) {
  // transform en docXML
  var parser = new DOMParser();
  var xmlDoc = parser.parseFromString(reader.result, "application/xml");   
// à supprimer  var xmlDoc = xml.responseXML;
  var indent = TAB + TAB;
  var text = [];
  text.push(getEntete());
  text.push(indent + "<nodes>" + CR + getNodes(xmlDoc, indent) + indent + "</nodes>");
  text.push(getEdges(indent));
  text.push(getEmpied());
  document.getElementById("result").textContent = text.join(CR);
}

au passage il n'y a pas d'élément ayant pour ID result dans ton code.

Autre point à signaler, si tu doit pouvoir charger plusieurs fichiers l'un après l'autre il te faut « resetter » ton objet IDRelation pour chaque nouvelle analyse.

Tu peut le faire de la façon suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
 * Gestion des relations pour <edges>
 */
var IDRelation = {
  indice: 0,
  edge: [],
  getID: function(idxParent, elem) {
    var previousId = this.indice;             // id précédente
    this.indice += 1;
    // stoquage donnée
    this.edge.push({
       "id": previousId
      ,"source": idxParent
      ,"target": this.indice
      ,"sourceTag": elem.parentNode.tagName   // pour vérif
      ,"targetTag": elem.tagName              // pour vérif
    });
    return (this.indice);
  },
  reset: function(){
    this.indice = 0;
    this.edge.length = 0;
  }
};

et ajouter cette initialisation dans la fonction fctCallBack, donc cela donne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function fctCallBack(xml) {
  IDRelation.reset();
  // transform en docXML
  var parser = new DOMParser();
  var xmlDoc = parser.parseFromString(reader.result, "application/xml");   
  var indent = TAB + TAB;
  var text = [];
  text.push(getEntete());
  text.push(indent + "<nodes>" + CR + getNodes(xmlDoc, indent) + indent + "</nodes>");
  text.push(getEdges(indent));
  text.push(getEmpied());
  document.getElementById("result").textContent = text.join(CR);
}

Un dernier point pour finir, je mettrais un test du type de fichier dans la « function Watilin »

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
document.querySelector("input[type=file]")
  .addEventListener("change", (event) => {
    let file = event.target.files[0];
    if (!file) {
      console.log("Aucun fichier sélectionné");
      return;
    }
    else {
      console.log(file);
      // test si fichier XML
      if( "text/xml" === file.type){
        let reader = new FileReader();
        reader.onload = () => {
          // la suite du code   
        };
        reader.readAsText(file);
      }
    }
  });

**Pal31** · 12/03/2019, 14h45

Merci pour toutes ces indications, je les ai mises en place.

Pour ce qui est du code de la fonction de Watilin, j'ai essayé d'appeler ma fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

fctCallBack(reader.result);

comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
(...)
            document.body.append($a);
            $a.click();
            $a.remove();
            URL.revokeObjectURL(blobUrl);
          };
        }
//      Appel de la fonction pour lire et écrire le nouveau document
      $ta.value = fctCallBack(reader.result);    
 
//     Retourne le document XML d'entrée
        $ta.value = reader.result;
 
 
        highlightText($ta);
 
      };
        reader.readAsText(file);
      }
    }
  });

ou encore comme ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
(...)
            document.body.append($a);
            $a.click();
            $a.remove();
            URL.revokeObjectURL(blobUrl);
          };
        }
//      Appel de la fonction pour lire et écrire le nouveau document
      fctCallBack(reader.result);    
 
        $ta.value = reader.result;
        highlightText($ta);
 
      };
        reader.readAsText(file);
      }
    }
  });

Je n'arrive pas à obtenir mon document. Est-ce que j'appelle mal ma fonction ou que je l'ai mal placée?
Je vais continuer mes tests.
Merci

**Watilin** · 12/03/2019, 17h31

Salut,

j’allais proposer une solution à base de DOMParser, mais je vois que NoSmoking m’a devancé.

La partie importante dans ma fonction, c’est l’objet FileReader et sa méthode .readAsText(). Cette méthode est asynchrone, c’est-à-dire, en gros, qu’elle aura un effet « à un moment », mais on ne peut pas savoir précisément à quel moment. Cet effet est représenté par un évènement load, c’est pour ça qu’on attache une fonction onload au reader.
Cette fonction signifie « quand readAsText() aura terminé, fais ceci ». À l’intérieur de cette fonction, reader.result est disponible. Et là je pense que NoSmoking a été un peu vite, car il utilise reader.result à l’intérieur de la fonction fctCallBack, alors qu’il faudrait utiliser l’argument xml :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var xmlDoc = parser.parseFromString(xml, "application/xml");

Un mot à propos de cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

let blob = new Blob([ $ta.value ], { type: "text/gexf" });

Le type passé au constructeur Blob est censé être un type MIME. En l’occurence je serais étonné que le format GEFX ait son propre type MIME alors qu’il ne s’agit de rien de plus que du XML.
Le type du blob a une incidence sur la façon dont le système d’exploitation va présenter le fichier à l’utilisateur. "text/gexf" sera probablement considéré comme un type inconnu, et le fichier sera présenté avec une icône générique. Ce n’est pas très grave, mais dans le doute, je te conseille de laisser le type "text/xml" ou "application/xml". (Voir cette réponse StackOverflow si tu te demandes quelle différence il y a entre les deux.)

Pour revenir au sujet, si tu veux que l’instruction suivante fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$ta.value = fctCallBack(reader.result);

Il faut donner une valeur de retour à fctCallBack, avec un return, comme tu le fais à d’autres endroits.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function fctCallBack(xml) {
 
  ...
 
  return text.join(CR);
}

Autre chose : dans mon code, toutes les instructions qui concernent la variable $ta (un élément <textarea>) sont probablement inutiles pour toi, elles concernaient le problème pour lequel j’ai écrit ce code initialement. Pour la même raison, tu peux sans doute supprimer la fonction highlightText.

Au lieu d’utiliser $ta, tu peux passer directement le résultat de fctCallBack au blob :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
let xmlText = fctCallBack(reader.result);
let blob = new Blob([ xmlText ], { type: "text/xml" });

En fait, je pense que tu n’as pas non plus besoin de $button. Dans la discussion originale, l’idée était de permettre à l’utilisatrice ou l’utilisateur d’intervenir manuellement sur le XML avant de l’enregistrer. Dans ton cas, le traitement est automatique.
Donc, on peut supprimer le $button et la fonction onclick().

Au final on a un code un peu plus simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
document.querySelector("input[type=file]")
  .addEventListener("change", (event) => {
    let file = event.target.files[0];
    if (!file) {
      console.log("Aucun fichier sélectionné");
      return;
    }
    else {
      console.log(file);
      // test si fichier XML
      if ("text/xml" === file.type) {
        let reader = new FileReader();
        reader.onload = () => {
            // $button.onclick = () => {
 
            let xmlText = fctCallBack(reader.result);
            let blob = new Blob([ xmlText ], { type: "text/xml" });
            let blobUrl = URL.createObjectURL(blob);
 
            let $a = document.createElement("a");
            $a.download = file.name;
            $a.href = blobUrl;
 
            document.body.append($a);
            $a.click();
            $a.remove();
            URL.revokeObjectURL(blobUrl);
 
            // };
          }
        };
 
        reader.readAsText(file);
      }
      else {
        // si pas XML, faire remonter l’info
        document.body.append("Il semblerait que ce fichier ne soit pas XML");
      }
    }
  });

**Pal31** · 12/03/2019, 18h41

Merci pour ta réponse, j'ai essayé de corriger quelques erreurs présentes après la modification et la simplification du code que tu m'as proposé: enlever un "}" en trop juste avant le 2ème Else et déplacer la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

let file = event.target.files[0];

Juste après le 1er Else car il ne la considérait pas comme définie pour la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

reader.readAsText(file);

edit:
Malgré ces corrections je bloque sur cette erreur:

Nom : problème.png
Affichages : 289
Taille : 15,3 Ko

voici le code des 2 fonctions concernées que j'ai dans mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function fctCallBack(xml) {
  IDRelation.reset();
  // transform en docXML
  var parser = new DOMParser();
  var xmlDoc = parser.parseFromString(xml, "application/xml");
  var indent = TAB + TAB;
  var text = [];
  text.push(getEntete());
  text.push(indent + "<nodes>" + CR + getNodes(xmlDoc, indent) + indent + "</nodes>");
  text.push(getEdges(indent));
  text.push(getEmpied());
  document.getElementById("result").textContent = text.join(CR);
 
return text.join(CR);
}

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
document.querySelector("input[type=file]")
  .addEventListener("change", (event) => {
    let file = event.target.files[0];
    if (!file) {
        console.log("Aucun fichier sélectionné");
        return;
    }
    else {
        let reader = new FileReader();
        console.log(file);
        // test si fichier XML
        if ("text/xml" == file.type) {
 
            reader.onload = () => {
 
//                $button.onclick = () => {
 
                    let xmlText = fctCallBack(reader.result);  
                    let blob = new Blob([ xmlText ], { type: "text/xml" });
                    let blobUrl = URL.createObjectURL(blob);
 
                    let $a = document.createElement("a");
                    $a.download = file.name;
                    $a.href = blobUrl;
 
                    document.body.append($a);
                    $a.click();
                    $a.remove();
                    URL.revokeObjectURL(blobUrl);
//                };
 
            };
        }
        else {
            // si pas XML, faire remonter l’info
            document.body.append("Il semblerait que ce fichier ne soit pas XML");
        }
        reader.readAsText(file);
    }
});

Merci

**NoSmoking** · 12/03/2019, 18h57

Envoyé par Watilin

Et là je pense que NoSmoking a été un peu vite

copier/coller avec des moufles !

Envoyé par Pal31

Malgré ces corrections je n'arrive pas à régler un problème:

Je t'ai prévenu

au passage il n'y a pas d'élément ayant pour ID result dans ton code.

compte tenu que la fonction retourne le traitement, tu n'en as plus besoin.

Attention :

Envoyé par Pal31

Le fait que ce soit modifiable n'est pas un problème, au contraire car avant enregistrement, s'il y a une erreur cela me permettrait de modifier le nouveau code

tu vas peut être avoir intérêt à conserver ta <textarea>.

Pour le reste des simplifications je pense que cela ne sera que bien meilleur.

**Watilin** · 12/03/2019, 19h20

Envoyé par Pal31

Merci pour ta réponse, j'ai essayé de corriger quelques erreurs présentes après la modification et la simplification du code que tu m'as proposé: enlever un "}" en trop juste avant le 2ème Else

Oups

inattention de ma part, je m’excuse.
En ce qui concerne l’instruction reader.readAsText(file);, elle était au bon endroit, juste après la définition de la fonction onload.
Le triple-égal (===) n’était pas une erreur, c’est la comparaison stricte (voir opérateurs de comparaison). Il vaut mieux éviter le double-égal autant que possible, il fait des conversions de types implicites et c’est rarement une bonne chose.

J’ai retravaillé légèrement mon code, en tenant compte de la remarque de NoSmoking :

Envoyé par NoSmoking

Attention :

tu vas peut être avoir intérêt à conserver ta <textarea>.

Cette fois j’espère qu’il n’y a plus d’erreur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
document.querySelector("input[type=file]")
  .addEventListener("change", (event) => {
    let file = event.target.files[0];
    if (!file) {
      document.body.append("Aucun fichier sélectionné");
      return;
    }
    // test si fichier XML
    else if ("text/xml" === file.type || "application/xml" === file.type) {
      let reader = new FileReader();
 
      reader.onload = () => {
        let xmlText = fctCallBack(reader.result);
 
        let $ta = document.querySelector("textarea");
        let $button = document.querySelector("button");
        if (!$ta) {
          $ta = document.createElement("textarea");
          $ta.cols = 80;
          $ta.rows = 15;
          $button = document.createElement("button");
          $button.textContent = "Enregistrer";
 
          document.body.append($ta, $button);
 
          $button.onclick = () => {
            let blob = new Blob([ $ta.value ], { type: "text/xml" });
            let blobUrl = URL.createObjectURL(blob);
 
            let $a = document.createElement("a");
            $a.download = file.name;
            $a.href = blobUrl;
 
            document.body.append($a);
            $a.click();
            $a.remove();
            URL.revokeObjectURL(blobUrl);
          };
        }
 
        $ta.value = xmlText;
      };
 
      reader.readAsText(file);
    }
    else {
      // si pas XML, faire remonter l’info
      document.body.append("Il semblerait que ce fichier ne soit pas XML");
    }
  });

**Pal31** · 12/03/2019, 19h41

Oups inattention de ma part, je m’excuse.

Tu n'as pas à t'excuser, ça m'a permis d'essayer de comprendre un peu plus loin, et tout le monde a le droit à des oublis

J’ai retravaillé légèrement mon code, en tenant compte de la remarque de NoSmoking :

Attention :
tu vas peut être avoir intérêt à conserver ta <textarea>.

Cette fois j’espère qu’il n’y a plus d’erreur

Oui c'est parfait comme ça merci beaucoup!

Malgré ces corrections je n'arrive pas à régler un problème:

Je t'ai prévenu

edit:
Malgré ces corrections je bloque sur cette erreur:

En effet, c'est un mauvais réflexe que j'ai sur lequel je vais tacher de faire plus attention à l'avenir, et je m'en excuse.

au passage il n'y a pas d'élément ayant pour ID result dans ton code.

compte tenu que la fonction retourne le traitement, tu n'en as plus besoin.

En effet, j'ai donc supprimé cette ligne dans la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function fctCallBack(xml) {
  IDRelation.reset();
  // transform en docXML
  var parser = new DOMParser();
  var xmlDoc = parser.parseFromString(xml, "application/xml");
  var indent = TAB + TAB;
  var text = [];
  text.push(getEntete());
  text.push(indent + "<nodes>" + CR + getNodes(xmlDoc, indent) + indent + "</nodes>");
  text.push(getEdges(indent));
  text.push(getEmpied());
  return text.join(CR);
}

Et le code marche parfaitement.
Un grand merci à vous 2.

Pour ce qui est de l'extension du fichier, lors de l'enregistrement elle est au format XML.
J'avais pensé à rajouter une fonction qui pourrait changer l'extension du fichier pour la mettre au format GEXF (Je ne me suis pas encore penché dessus, car je sais que je peux mettre un script .bat en place pour modifier l'extension dans le dossier désiré).

Pensez-vous qu'il serait possible de le faire dans la fonction de Watilin ou serait-il préférable de créer une autre fonction, ou même est-ce tout simplement impossible par le biais de javascript?

Pour ma part, je pars du travail donc je regarderai tout ça demain matin. Encore un énorme merci et bonne soirée

**NoSmoking** · 12/03/2019, 21h45

Concernant le nom de fichier, c'est cette instruction qui te le donne : $a.download = file.name.

Là où se trouve l'instruction tu auras toujours le même nom qui sera celui du premier fichier sélectionné.

Il te faut dans ton cas mettre le nom du fichier sélectionné dans un champ caché ou non pour le lire et l'affecter à l'élément

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
// test si fichier XML
else if ("text/xml" === file.type || "application/xml" === file.type) {
    elementFileName.value = file.name.split(".")[0] + ".gexf";     // stockage du non de fichier en cours
    let reader = new FileReader();
    // ...

et pour la récupération

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$a.download = elementFileName.value;

Il te faut bien sûr définir elementFileName, <span>, utiliser textContent dans ce cas, ou <input>.

Cacher ou non, pour avoir traité ce cas plusieurs fois, j'aurais tendance à conseiller le champ visible ce qui permet la modification du nom si besoin.

Ton convert XMLToGEXF et pour ainsi au point ou presque

**Watilin** · 12/03/2019, 21h49

Envoyé par Pal31

Pour ce qui est de l'extension du fichier, lors de l'enregistrement elle est au format XML.
J'avais pensé à rajouter une fonction qui pourrait changer l'extension du fichier pour la mettre au format GEXF […]
Pensez-vous qu'il serait possible de le faire dans la fonction de Watilin ou serait-il préférable de créer une autre fonction, ou même est-ce tout simplement impossible par le biais de javascript?

L’attribut download permet de faire ça.

Edit : … Grillé par NoSmoking

**Pal31** · 13/03/2019, 10h05

Bonjour, c'est exactement ce qu'il me fallait, c'est juste parfait merci beaucoup à vous deux pour votre aide, vos suggestions et vos conseils.
Je récupère toutes mes informations et le fichier .gexf fonctionne à merveille dans le logiciel de visualisation.

Je vous poste le code, le résultat et la visualisation dans le logiciel gephi pour que vous puissiez voir la finalité du projet:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="fr">
	<head>
	  <meta charset="utf-8" />
	  <title>Proptools mise en forme gephi</title>
	  <style>
 
         textarea {
            display: block;
            border: solid thin #6cf;
            padding: 1px;
            width: 100%;
            max-height: 10000em;
            overflow: auto;
         }
 
  </style>
	</head>
	<body>
	    <p> Conçu grâce à l'aide fournie par les développeurs de developpez.net </p>
		<input type="file" />
	<script>
        "use strict";
 
        var TAB = "    ";
        var CR =  "\n";
        /*
         * Gestion des relations pour <edges>
         */
        var IDRelation = {
                indice: 0,
                edge: [],
                getID: function(idxParent, elem) {
                        var previousId = this.indice;             // id précédente
                        this.indice += 1;
                        // stoquage donnée
                        this.edge.push({
                                "id": previousId
                                ,"source": idxParent
                                ,"target": this.indice
                                ,"sourceTag": elem.parentNode.tagName   // pour vérif
                                ,"targetTag": elem.tagName              // pour vérif
                        });
                        return (this.indice);
                },
                reset: function(){
                        this.indice = 0;
                        this.edge.length = 0;
                }
        };
        /**
         * version 2.0
         */
        function getNodes(elem, indent, indiceParent) {
                var retour = "";
                var children = elem.childNodes;
                var nbChildren = children.length;
                var child;
                var id;
                var i;
         
                for (i = 0; i < nbChildren; i += 1) {
                        child = children[i];
                        // si élément est de type ELEMENT_NODE
                        if (1 === child.nodeType) {
                                // récup. ID et mise à jour table liaison
                                id = IDRelation.getID(indiceParent, child);
                                // si des enfants
                                if (child.childElementCount) {
                                        // prise en compte du tagName
                                        retour += indent + TAB + '<node id="' + id + '" label="' + child.tagName + '">' + CR;
                                        retour += indent + TAB + '</node>' + CR;
                                        // on y retourne pour la suite
                                        retour += getNodes(child, indent, id /* indiceParent */ );
                                }
                                else {
                                        // récup. attributes si existent pour affichage
                                        if (child.hasAttributes()) {
                                                var attrs = child.attributes;
                                                var item;
                                                var text = [];
                                                for (item = 0; item < attrs.length; item += 1) {
                                                text.push(attrs[item].name + " = " + attrs[item].value);
                                                }
                                                child.textContent = text.join(", ");
                                        }
                                        retour += indent + TAB + '<node id="' + id + '" label="' + child.tagName + '">' + CR;
                                        retour += indent + TAB + TAB + "<attvalues>" + CR;
                                        retour += indent + TAB + TAB + TAB + '<attvalue for="0" value="' + child.textContent + '"/>' + CR;
                                        retour += indent + TAB + TAB + '</attvalues>' + CR;
                                        retour += indent + TAB + '</node>' + CR;
                                }
                        }
                        else {
                                /* on ne fait rien */
                        }
                }
                // fin balise si existe
                //var endTag = elem.tagName ? (indent.substring(TAB.length) + LT +"/" + elem.tagName + ">" + CR) : "";
                return retour;
        }
         
        /* Création de l'entête du document GEXF */
        function getEntete(indent) {
                indent = indent || '';
                var text = [];
                text.push('<?xml version="1.0" encoding="UTF-8"?>');
                text.push('<gexf xmlns="http://www.gexf.net/1.2draft" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.gexf.net/1.2draft http://www.gexf.net/1.2draft/gexf.xsd" version="1.2">');
                text.push(indent + TAB + '<graph defaultedgetype="directed">');
                text.push(indent + TAB + TAB + '<attributes class="node">');
                text.push(indent + TAB + TAB + TAB + '<attribute id="0" title="Value" type="string"/>');
                text.push(indent + TAB + TAB + TAB + '<default>true</default>');
                text.push(indent + TAB + TAB + '</attributes>');
                return text.join(CR);
        }
        function getEdges(indent) {
                indent = indent || '';
                var data = IDRelation.edge;
                var text = [indent + '<edges>'];
                data.shift();                         // supprime le premier non concerné
                data.forEach(function(obj, ind) {
                        text.push(indent + TAB + '<edge id="' + obj.id + '" source="' + obj.source + '" target="' + obj.target + '"/>');
                        //text.push(indent + TAB + '<edge id="' + obj.id + '" source="' + obj.sourceTag + '" target="' + obj.targetTag + '"/>');
                });
                text.push(indent + '</edges>');
                return text.join(CR);
        }
        /* Fermeture des balises <graph> et <gexf> */
        function getEmpied(indent) {
                indent = indent || '';
                var text = [];
                text.push(indent + TAB + '</graph>');
                text.push(indent + '</gexf>');
                return text.join(CR);
        }
        /**
         *
         */
        function fctCallBack(xml) {
                IDRelation.reset();
                // transform en docXML
                var parser = new DOMParser();
                var xmlDoc = parser.parseFromString(xml, "application/xml");
                var indent = TAB + TAB;
                var text = [];
                text.push(getEntete());
                text.push(indent + "<nodes>" + CR + getNodes(xmlDoc, indent) + indent + "</nodes>");
                text.push(getEdges(indent));
                text.push(getEmpied());
                return text.join(CR);
        } 
 
        document.querySelector("input[type=file]")
          .addEventListener("change", (event) => {
                let file = event.target.files[0];
                if (!file) {
                        document.body.append("Aucun fichier sélectionné");
                        return;
                }
                // test si fichier XML
                else if ("text/xml" === file.type || "application/xml" === file.type) {
                  let  elementFileName = document.createElement("a");
        elementFileName.value = file.name.split(".")[0] + ".gexf";     // stockage du non de fichier en cours
        let reader = new FileReader();
         
                        reader.onload = () => {
                                let xmlText = fctCallBack(reader.result);
                 
                                let $ta = document.querySelector("textarea");
                                let $button = document.querySelector("button");
                                if (!$ta) {
                                        $ta = document.createElement("textarea");
                                        $ta.cols = 80;
                                        $ta.rows = 55;
                                        $button = document.createElement("button");
                                        $button.textContent = "Enregistrer";
                 
                                        document.body.append($ta, $button);
                 
                                        $button.onclick = () => {
                                                let blob = new Blob([ $ta.value ], { type: "text/xml" });
                                                let blobUrl = URL.createObjectURL(blob);
                         
                                                let $a = document.createElement("a");
                                                $a.download = elementFileName.value;
                                                $a.href = blobUrl;
                         
                                                document.body.append($a);
                                                $a.click();
                                                $a.remove();
                                                URL.revokeObjectURL(blobUrl);
                                        };
                                }                
                                $ta.value = xmlText;
                        };
                        reader.readAsText(file);
                }
                else {
                  // si pas XML, faire remonter l’info
                  document.body.append("Il semblerait que ce fichier ne soit pas XML");
                }
        });
</script>
</body>
</html>

Résultat:

Nom : résult.png
Affichages : 274
Taille : 65,0 Ko

et enfin la visualisation dans le logiciel:

vue du graph: Nom : gephi_visu.png
Affichages : 272
Taille : 48,6 Ko

Données des noeuds:

Nom : node_data.png
Affichages : 281
Taille : 6,2 Ko

Données des liens:

Nom : link_data.png
Affichages : 264
Taille : 9,9 Ko

J'ai pu tester avec plusieurs documents de taille variable (jusqu'à plus de 1500 nœuds) et ça fonctionne à merveille.
Un grand merci encore une fois.
Peut être à bientôt sur une nouvelle discussion

Sélectionner un fichier local XML et l'enregistrer au format GEXF après traitement

JavaScript

Discussions similaires

Partager

Partager