Télécharger un fichier sur le disque local sans PHP

Version imprimable

25/01/2018, 15h38
TomHardcore_

1 pièce(s) jointe(s)

Télécharger un fichier sur le disque local sans PHP

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).

Pièce jointe 345529

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 !
25/01/2018, 15h54
SpaceFrog

à part un fichier zip ...
25/01/2018, 16h15
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).
25/01/2018, 16h22
SpaceFrog

Tu peux toujours mettre le contenu du .txt dans un textarea et proposer de faire un copier coller ...
ou le mettre en localstorage ?
25/01/2018, 16h38
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 !
25/01/2018, 18h55
TomHardcore_

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

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:

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);
		}
 
	}

26/01/2018, 00h16
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:

elem.type = "text/plain";

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

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 :aie: 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:

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:

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/

27/01/2018, 11h54
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/
27/01/2018, 13h17
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. :D

Merci tout le monde ;)