Impossible d'utiliser FileSaver.js

**Zebulon777** · 04/10/2018, 10h31

Bonjour tout le monde,

depuis quelques heures, j'essaye désespérément d'utiliser FileSaver.js, mais à chaque fois, j'ai une erreur :

FileSaver.js:184 Uncaught ReferenceError: module is not defined
at FileSaver.js:184
at FileSaver.js:10
at FileSaver.js:13

Dans mon HTML, j'ai bien ajouté la ligne : <script src="scripts/FileSaver.js-master/dist/FileSaver.js"></script> et la fonction d'appel est la suivante :

Code javascript :

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
 
function download(filename, text) {
//    var pom = document.createElement('a');
//    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
//    pom.setAttribute('download', filename);
//
//    if (document.createEvent) {
//        var event = document.createEvent('MouseEvents');
//        event.initEvent('click', true, true);
//        pom.dispatchEvent(event);
//    }
//    else {
//        pom.click();
//    }
 
var FileSaver = require('file-saver');
var blob = new Blob([text], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, filename);	
 
}

La première partie (en commentaire) de la fonction fonctionne très bien, mais FileSaver.JS me semblait plus complet, avec plus de contrôles.
J'ai surement dû mal suivre les instructions sur https://github.com/eligrey/FileSaver.js/, mais je ne vois pas ce que je loupe.

Merci d'avance pour le dépannage

**psychadelic** · 04/10/2018, 13h35

J'utilise de temps en temps ce module.

pour m'en servir je fais une copie du JS que je place dans mon répertoire local.

**Zebulon777** · 04/10/2018, 13h41

Dans le doute, j'ai essayé de le mettre dans le répertoire local, mais toujours la même erreur : "module is not defined" en ligne 184 qui correspond à module.exports = _global.saveAs = saveAs.saveAs = saveAs;
On dirait presque un bug sur la version que je viens de récupérer.

Tu mets quoi exactement comme code d'appel et de déclaration ?

**Marco46** · 04/10/2018, 15h01

Probable que ton bundler n'arrive pas à résoudre le require qui se trouve en plein milieu du source. Il devrait être en entête du fichier source.

Ou pire tu n'as pas de bundler (mais dans ce cas ça devrait planter sur le require et pas sur le module).

Tu ne peux pas utiliser la balise <script src="scripts/FileSaver.js-master/dist/FileSaver.js"></script> pour importer des modules exposés avec CommonJS les navigateurs ne comprennent pas la syntaxe.

Il faudrait voir ton package.json pour t'en dire plus. Il faut comprendre comment ton appli est ficelée.

**Zebulon777** · 04/10/2018, 15h19

Oula, alors là, tu m'as complètement perdu

Qu'est-ce que je dois mettre dans le HTML et dans le JS ?

**Marco46** · 04/10/2018, 15h22

Montre nous ton package.json.

Tu fais comment pour lancer ton appli ?

**Marco46** · 04/10/2018, 15h25

Ok alors en fait cette lib supporte très bien l'export global.

Donc oublie le var FileSaver = require('file-saver');. Il te suffit simplement de supprimer cette ligne de ton source et ça devrait fonctionner (n'oublie pas l'import de script pour le coup).

**Zebulon777** · 04/10/2018, 15h26

Désolé, mais, je ne sais pas ce que c'est qu'un package.json et pour lancer l'appli, bah, je fais normalement, je passe par le fichier html (amha, je n'ai pas du comprendre ce que le monsieur veux me dire

)

Je pensais que pour utiliser FlieSaver.js, il suffisait de déclarer le scipt et d'appeler la procédure ???

**Marco46** · 04/10/2018, 15h28

Faut avoir conscience que de nos jours en web ne pas utiliser des outils comme npm c'est développer comme à la fin des années 90. Je dis ça pour t'en faire prendre conscience pas pour te descendre.

Supprime la ligne avec le require ça va rouler.

**psychadelic** · 04/10/2018, 17h22

Arg, je vois que j'utilise toujours une ancienne version, visiblement ce nouveau module utilise une boite de dialogue

Faudra que je test tout ça...

**psychadelic** · 04/10/2018, 18h49

Bon, j'ai fait mes test et je suis completement dérouté par cette nouvelle version, je pense qu'elle est faite pour fonctionner avec React.JS

J'ai retrouvé la page de test d'origine : => https://eligrey.com/demos/FileSaver.js/
et elle fonctionne avec une version 2015 que l'on peut retrouver la : https://fastcdn.org/FileSaver.js/

Dont je me suis fait la copie des 2 versions ( minifiée ou non)

Du Coup l'utilisation ce passe ainsi :

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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>test File Save</title>
 
  <script src="FileSaverCDN.js"  defer></script>
  <script>
    document.addEventListener("DOMContentLoaded",function(e){
 
      var PartieTexte = document.getElementById('PartieTexte')
      
      document.getElementById('SavButton').onclick = function(e) {
 
          var blob = new Blob([PartieTexte.value], {type: "text/plain;charset=utf-8"});
          saveAs(blob, "hello world.txt");
      }
    });
  </script>
</head>
<body>
  <textarea id="PartieTexte" ></textarea>	
  <button id="SavButton">Sauvegarder</button>
</body>
</html>

**Zebulon777** · 05/10/2018, 13h37

Envoyé par Marco46

Faut avoir conscience que de nos jours en web ne pas utiliser des outils comme npm c'est développer comme à la fin des années 90. Je dis ça pour t'en faire prendre conscience pas pour te descendre.

Supprime la ligne avec le require ça va rouler.

Sans le require, j'ai exactement la même erreur.

Envoyé par psychadelic

Bon, j'ai fait mes test et je suis completement dérouté par cette nouvelle version, je pense qu'elle est faite pour fonctionner avec React.JS

J'ai retrouvé la page de test d'origine : => https://eligrey.com/demos/FileSaver.js/
et elle fonctionne avec une version 2015 que l'on peut retrouver la : https://fastcdn.org/FileSaver.js/

Dont je me suis fait la copie des 2 versions ( minifiée ou non)

Du Coup l'utilisation ce passe ainsi :

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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>test File Save</title>
 
  <script src="FileSaverCDN.js"  defer></script>
  <script>
    document.addEventListener("DOMContentLoaded",function(e){
 
      var PartieTexte = document.getElementById('PartieTexte')
      
      document.getElementById('SavButton').onclick = function(e) {
 
          var blob = new Blob([PartieTexte.value], {type: "text/plain;charset=utf-8"});
          saveAs(blob, "hello world.txt");
      }
    });
  </script>
</head>
<body>
  <textarea id="PartieTexte" ></textarea>	
  <button id="SavButton">Sauvegarder</button>
</body>
</html>

Super, merci.
Par contre, je n peux pas tester ça aujourd'hui, je m'en occupe la semaine prochaine et je ne manquerai pas de vous faire part du résultat.

Une petite question en plus : est-ce qu'il vaut mieux utiliser le download ou le FileSaver.js ? Quels sont les avantages et les inconvénients de l'un et de l'autre ?

**Zebulon777** · 10/10/2018, 14h13

Hop, je réponds sans faire véritablement de réponse, car je ne sais toujours pas ce qu'il vaut mieux exploiter entre download et FileSaver.js, mais quoi qu'il en soit, j'ai choisit FileSaver.js qui me semble plus complet.

Donc, pour aider ceux qui pourraient avoir le même genre de problème, voici ce que ça donne :

Code javascript :

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
 
...
...
...
var NomCSV = "HeuresGlissantes_" + P_dayInit;
var Ext = ".CSV";
var FicCSV = NomCSV + Ext;
// Ecrire le contenu de la variable WLigneCSV dans un fichier
download(FicCSV, WLigneCSV);
...
...
...
function download(filename, text) {
//// HTML5 -> Download	
//    var pom = document.createElement('a');
//    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
//    pom.setAttribute('download', filename);
//
//    if (document.createEvent) {
//        var event = document.createEvent('MouseEvents');
//        event.initEvent('click', true, true);
//        pom.dispatchEvent(event);
//    }
//    else {
//        pom.click();
//    }
 
 //HTML5 -> FileSaver.JS
	var blob = new Blob([text], {type: "text/plain;charset=utf-8"});
	saveAs(blob, filename);
}

Voila, quand on sait, rien de bien compliqué, mais si ça peut éviter à d'autres de chercher

Merci encore pour toute l'aide apportée.

Impossible d'utiliser FileSaver.js

JavaScript

Discussions similaires

Partager

Partager