Changer le nom d'un fichier au téléchargement

Version imprimable

Bonjour à tous,

J'ai créé une fonction permettant de sortir un fichier CSV à partir d'un json.
Ce fichier peut se télécharger en cliquant sur un bouton.

J'aimerais pouvoir changer le nom de ce fichier lors du clic sur le bouton (pour l'instant il s'appelle "téléchargement" par défaut).
Mon plus gros souci est que l'extension n'est pas affichée (je voudrais en effet avoir au moins le .csv).

Voici 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
 
function JSON2CSV() {
 
  var myjson = "http://*****/get_json_test.php?callback=?";
 
  $('.filter').each(function(i, obj){
     var input = $(obj).find("input")[0];
     myjson += '&'+input.name+'=' + input.value;
  });
 
  $('.display').each(function(i,obj){
     myjson += '&'+$(obj).attr('table')+'|'+$(obj).attr('titre')+'';
  });
 
  $.getJSON(myjson, function(data){
     var line = '';
     var str = '';
        if(data.length != 0){
           $.each(data[0], function(index, valeur){ //Pour chaque colonne
              var line = '';
              var value = index;
              line += value + ';';
              str += line; //+ '\r\n';
           });
           str = str.slice(0, -1);
           str += '\n';
 
           $.each(data, function(i,ti){
              $.each(ti, function(index, valeur){
                 var line = '';
                 var valeur = valeur;
                 line += valeur + ';';
                 str += line; // + '\r\n';
              });
           str = str.slice(0, -1);
           str += '\n';
           }); //End each
        window.open("data:application/str;charset=utf-8;" + encodeURIComponent(str));
        } //End if
  }); //End getJSON
} //End JSON2CSV

Sauriez vous ce que je dois changer dans la ligne :

Code:

window.open("data:application/str;charset=utf-8;" + encodeURIComponent(str));

afin d'avoir un nom comme "Requête.csv" ?

Merci de votre aide,
Corentin.

23/04/2015, 11h54
SpaceFrog

la reponse ne se trouve pas coté javascript ...
mais plutot au niveau de ton force download php ...
23/04/2015, 12h01
CocoFlouq

Ca signifie que je dois effectuer la modification au niveau de mon fichier php ?
Existe-t-il une solution en javascript afin de ne pas toucher à ce fichier ?
Merci pour ton aide.
23/04/2015, 12h45
SpaceFrog

non clairement c'est totalement hors de portée de javascript
23/04/2015, 13h50
thelvin

Bah, quand même, il y a moyen de créer un simple lien invisible <a href="data:text/plain,Hello%20World!" download="salutation.txt"> et de déclencher un clic dessus par JavaScript.

Après ça marche vraiment bien que sur les navigateurs qui gèrent l'attribut download, quoi.
23/04/2015, 17h24
sekaijin

Citation:

Envoyé par CocoFlouq

Ca signifie que je dois effectuer la modification au niveau de mon fichier php ?
Existe-t-il une solution en javascript afin de ne pas toucher à ce fichier ?
Merci pour ton aide.

J'avoue que je ne comprends pas l'intérêt de tout ce truc.
tu construis un json que tu envois à un php qui en fait un csv
qui t'est retourné dans un flux
que tu lis pour le transformer (là je ne vois vraiment pas pourquoi) en CSV (alors que le php l'a déjà transformé.
que tu place ensuite dans un lien dat: pour le télécharger.

Perso je construit mon json que j'envois à mon php via un form caché en post
le php le formate et csv et le retourne en attachement (download)
c'est fini.

quant à l'argument je ne veux pas toucher au serveur
je ne le comprends pas plus
de toute façon ton js est installé sur le serveur donc tu touche au serveur.

A+JYT
23/04/2015, 17h39
ABCIWEB

C'est tellement plus simple au niveau du force download de php qu'on voit pas pourquoi tu te prends la tête côté javascript. D'autant plus que modifier le nom du fichier en javascript pourrait poser des problèmes de sécurité.

je te donne un exemple vite fait pour faire ca en javascript tu peu l adapter facilement

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><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> exporter csv </title>
<script type="text/javascript"> 
 function jsonTblCsv(tbl) {
	 tbl=tbl||[];
	var ret = '';
	for (var i = 0; i < tbl.length; i++) {
		var ligne = '';
		for (var index in tbl[i]) {
			if (ligne != '') line += ','
			ligne += "\""+tbl[i][index]+"\"";
		}
		ret += ligne + '\r\n';
	}
	return ret;
}
 
 
 
function exportCSV(csv,nomFichier)
{
	var uri = 'data:text/csv;charset=utf-8,' + escape(csv);
	var downloadLink = document.createElement("a");
	if("download" in downloadLink){
		downloadLink.href = uri;
		downloadLink.download = nomFichier + ".csv";
		document.body.appendChild(downloadLink);
		downloadLink.click();
		document.body.removeChild(downloadLink);
	}else{
		if (/MSIE/gi.test(navigator.userAgent)) {
			var obj = window.open();
			obj.document.write('sep=,\r\n' + csv);
			obj.document.close();
			obj.document.execCommand('SaveAs', true, nomFichier + ".csv");
			obj.close();
		}
 
	}
}
 
function testExportCsv(){
	var nomFicher=prompt("entrer nom de ficher","test");
	var testJson=[
		{nom:"le nom"},
		{nom:"le prenom"},
		{nom:"le nom1"},
		{nom:"le prenom1"} 
	];
	var testCsv=jsonTblCsv(testJson);
	exportCSV(testCsv,nomFicher);
}
 
</script>
 
 
</head>
<body>
 
<button onclick="testExportCsv()" >tester export CSV</button>
</body>
</html>