Discussion :

[TomHardcore_]

Hello !

Je travaille en ce moment sur un projet où je voudrais proposer à l'utilisateur d'enregistrer sur son pc la map, sous forme de fichier .txt, d'un jeu (voir la capture d'écran ci dessous).



La map est modélisé sous forme de liste et je vais coder une fonction qui range les éléments de cette liste (qui sont des chaînes de caractères) ligne par ligne dans un fichier texte et qu'ensuite une autre fonction permet à l'utilisateur de télécharger ce fichier texte à partir du bouton "Téléchargé". Mon problème est pour la partit pour télécharger le fichier texte, il y-a-t'il un moyen de le faire sans PHP (et sans Ajax ou jQuery, que du js pur)?

J'ai déja codé un fonction pour importer et afficher une map à partir d'un .txt entré par l'utilisateur en javascript pur et en faite ça m'embêterais de devoir utiliser du php juste pour ça, surtout que je ne maîtrise pas du tout ce language.

Merci d'avoir lu !

[SpaceFrog]

à part un fichier zip ...

[TomHardcore_]

Pas moyen de téléchargé directement le txt ? Du coup ça demande l'utilisation d'une library genre JSZip (je viens de regarder).

[SpaceFrog]

Tu peux toujours mettre le contenu du .txt dans un textarea et proposer de faire un copier coller ...
ou le mettre en localstorage ?

[TomHardcore_]

Le textarea ça fait très bidouillage de dernier espoire XD mais pourquoi pas.
Je ne sais pas du tout ce qu'est le LocalStorage mais je vais me renseigner, merci !

[TomHardcore_]

non franchement même en me servant du localstorage je ne vois pas comment y parvenir

[melka one]

jour

si sa peut aider voici une function que javait créé pour un éditeur de texte et qui me permettait de sauvegarder un texte a partir d'une balise textearea en conservant le formatage

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
function sauver(){
 
		var items =document.getElementById("un_textarea").value.split('\n');
		var donne="";
 
		for(var i=0;i<items.length;i++){
 
			donne+=items[i]+"\r\n";
		}
 
		if(navigator.msSaveOrOpenBlob){
 
			var blobObject = new Blob([donne], { type: "text/plain" });
			window.navigator.msSaveOrOpenBlob(blobObject,"nom_fichier.txt");
		}
 
		else{
			var blob = new Blob([donne], {type: "text/plain"});
			var  url = window.URL.createObjectURL(blob);
 
			var elem = document.createElement('a');
			elem.href = url;
			elem.download = "nom_fichier.txt";
 
			var evt = new MouseEvent("click", { bubbles: true,cancelable: true,view: window,});
			elem.dispatchEvent(evt);
 
			setTimeout(function(){
				window.URL.revokeObjectURL(url);  
			}, 100);
		}
 
	}

[Watilin]

La solution de melka one est bonne.
De mon expérience, j’ai remarqué que suivant le navigateur et l’OS il pouvait être utile de rajouter un attribut type sur le lien pour « aider » le système à reconnaître le type de fichier.

Code :

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

elem.type = "text/plain";

Mais puisqu’on est sur du texte simple, il ne devrait pas y avoir de problème.

[headmax]

Bonsoir je veille un petit peu, pour ce qui est de la possibilité de téléchargement il y a biensur une solution pur html5, d'autre nécessitant des librairie pur js qu'on peu voir sur le git https://s3-us-west-2.amazonaws.com/s...2/FileSaver.js qui pourrait tout a fait convenir mais doit être testé sur d'autres navigateurs ce qui je n'ai pas vraiment eu le temps de faire ...
Sinon j'ai opté pour la version HTML5 et ces superbe fonctions blob, FileReader, File blob, FileReader, File capable de générer des images, text, et bien d'autres médias vous pouvez consulter la doc a sujet, je suis un piètre pédagogue je laisse la main Watilin, et SpaceFrog.

Exemple que j'ai posté pour le téléchargement pour des images SVG exemple téléchargement images SVG MAP

Javascript

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
 
function enregistreTexteCommeFichier()
{
	var texteAecrire = document.getElementById("inputTexteAEnregistrer").value;
	var texteFichierVersBlob = new Blob([texteAecrire], {type:'text/plain'});
	var fichierAEnregistrerSous = document.getElementById("inputFichierAEnregistrerSous").value;
 
	var lienDeTelechargement = document.createElement("a");
	lienDeTelechargement.download = fichierAEnregistrerSous;
	lienDeTelechargement.innerHTML = "Télécharger le fichier";
	if (window.webkitURL != null)
	{
		lienDeTelechargement.href = window.webkitURL.createObjectURL(texteFichierVersBlob);
	}
	else
	{
		// Firefox requires the link to be added to the DOM
		// before it can be clicked.
		lienDeTelechargement.href = window.URL.createObjectURL(texteFichierVersBlob);
		lienDeTelechargement.onclick = destroyClickedElement;
		lienDeTelechargement.style.display = "none";
		document.body.appendChild(lienDeTelechargement);
	}
 
	lienDeTelechargement.click();
}
 
function destroyClickedElement(event)
{
	document.body.removeChild(event.target);
};
 
function chargerLeFichierTexte()
{
	var fileToLoad = document.getElementById("fichierAcharger").files[0];
 
	var fileReader = new FileReader();
	fileReader.onload = function(fileLoadedEvent) 
	{
		var texteDuFichierCharger = fileLoadedEvent.target.result;
		document.getElementById("inputTexteAEnregistrer").value = texteDuFichierCharger;
	};
	fileReader.readAsText(fileToLoad, "UTF-8");
}

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
 
 
<table>
	<tr><td>Texte à enregistrer:</td></tr>
	<tr>
		<td colspan="3">
			<textarea id="inputTexteAEnregistrer" style="width:512px;height:256px"></textarea>
		</td>
	</tr>
	<tr>
		<td>Nom de fichier à enregistrer sous:</td>
		<td><input id="inputFichierAEnregistrerSous"></input></td>
		<td><button onclick="enregistreTexteCommeFichier()">Télécharger</button></td>
	</tr>
	<tr>
		<td>Choisir le fichier à Charger:</td>
		<td><input type="file" id="fichierAcharger">
		<td><button onclick="chargerLeFichierTexte()">Importer</button><td>
	</tr>
</table>

démo : https://codepen.io/headmax/full/ppMzmz/

[TomHardcore_]

Désolé de ne pas avoir répondu plus tôt, je n'avais plus internet !

Merci pour vos solutions, je vais tester tout ça de suite ! FileSaver.js à sur son github un tableau qui compare ce qui est supporté pour les différents naviguateurs si ça intéresse quelqu'un https://github.com/eligrey/FileSaver.js/

[TomHardcore_]

J'ai opté pour la solution de headmax simple et efficace !

Et finalement l'idée du textarea est pas si "bidouillage du dernier espoire" car ça permet à l'utilisateur de visualiser quel format/notation j'utilise comme donnée, et en plus c'est un peu un mini éditeur de map ! Avec un petit bouton update pour rafraîchir l'écran de jeu quand on a fini de noter les changements dans le textarea c'est tellement une bonne idée.

Merci tout le monde