crear archivo txt mediante ajax

Nashi · #1 (**permalink**) 20/12/2009, 21:07

Buenas!

Estoy intentando hacer que a partir de unos valores que obtengo con javascript, pueda crear un archivo txt para que el usuario lo pueda descargar. El tema de crear el txt es facil, y el de enviar los datos que tengo en js a php, creia que tbn lo seria pero se me esta resistiendo.
Aqui les dejo el codigo completo para que vean como esta:

Archivo HTML

Código:

<html>
<head>
<title>Crear txt</title>

<script type="text/javascript">

//funcion que simplemente crea un objeto ajax
function newAjax(){
      var xmlhttp=false;
      try {
         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (E) {
            xmlhttp = false;
         }
      }
      if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
         xmlhttp = new XMLHttpRequest();
      }
   return xmlhttp;
}  


//funcion que envia los datos que obtiene mediante ajax para poder crear el txt en php
function sendData(url){
		
	var nombre = "Antonio";
	var edad = 22;
	var direccion = "Sevilla";

	ajax = newAjax();

   	var data = "";
   	data = 'nombre='+nombre+'&edad='+edad+'&direccion='+direccion;
        
	ajax.open("POST", url, true);
  	ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=ISO-8859-1');
	ajax.send(data);
                //el siguiente codigo esta comentado pq no necesito actualizar el div
  	/*ajax.onreadystatechange = function () {
  		if (ajax.readyState == 4) {
     		document.getElementById('result').innerHTML = ajax.responseText;
		}
	}*/
	
	
}


</script>
</head>
<body>

<input type="button" onclick="sendData('maketxt.php');"value="test" />

<div id="result"></div>

</body>
</html

Archivo PHP

Código:

<?

header("Content-type: application/text");
header("Content-Disposition:  filename=\"archivo.txt\";");

$nombre = $_POST['nombre'];
$edad = $_POST['edad'];
$direccion = $_POST['direccion'];

$file = "nombre: ".$nombre."</br>";
$file .= "edad: ".$edad."</br>";
$file .= "direccion: ".$direccion."</br>";

print $file;

Explicado de una forma facil:

1.El usuario clica el boton con valor test y este llama a la funcion sendData con el nombre del archivo php donde creare el txt

2.Dentro de la funcion sendData, se crea el objeto Ajax y se envian los datos a maketxt.php mediante post

3. En el archivo maketxt.php, pongo lo que quiero que aparezca en el txt y lo imprimo, para que aparezca el dialogo de descarga de txt, pero en ajax parece que no funciona de todo bien.

Obviamente, si descomento las lineas:

Código:

//el siguiente codigo esta comentado pq no necesito actualizar el div
  	/*ajax.onreadystatechange = function () {
  		if (ajax.readyState == 4) {
     		document.getElementById('result').innerHTML = ajax.responseText;
		}
	}*/

Introduce el text dentro del div 'result', pero yo lo que quiero es que el usuario pueda descargar su archivo txt con ese contenido.

Alguien tiene alguna idea? Como podria pasar esos datos que tengo en js para poder meterlos en el archivo txt que quiero que el usuario puedas descargar?

Muchas gracias de antemano! : )

dggluz · #2 (**permalink**) 20/12/2009, 21:25

El problema es que en realidad tu script para "generar un archivo txt" no hace eso. Lo único que haces es mandar headers al navegador e imprimir los datos. Los headers sirven para indicarle al navegador cómo debe interpretar el resto de los datos de la página (si como imagen, como archivo de qué tipo, etc.). Por eso tu script funciona (parece generar un archivo de texto) cuando lo abres con el navegador. Pero el objeto AJAX no interpretará los headers como el navegador. Por eso no "abre" el notepad. Si de verdad quieres generar un archivo, debes hacerlo con las funciones de archivo (fopen, fwrite, fclose, etc.); el archivo se generará en el servidor. Luego podrías abrir una nueva pestaña en el navegador con el URL del archivo y el navegador intentará descargarlo. Sin embargo, para lo que quieres hacer me parece que lo más sencillo es un formulario que abra el script PHP que ya tienes en una nueva pestaña:

Código HTML:

<html>
<head>
    <title>Crear txt</title>
</head>
<body>
    <form method="post" name="formu" action="maketxt.php" target="_blank">
        <input type="hidden" name="nombre" value="Antonio" />
        <input type="hidden" name="edad" value="22" />
        <input type="hidden" name="direccion" value="Sevilla" />
        <input type="submit" value="test" />
    </form>
</body>
</html>

¡Suerte!

Nashi · #3 (**permalink**) 20/12/2009, 22:25

Buenas! justamente acababa de hacer algo parecido y acabo de leer tu respuesta, aunque yo lo he hecho de forma diferente, aqui pongo el codigo:

Código:

<html>
<head>
<title>Crear txt</title>
<script type="text/javascript">

function sendData(url){
   var nombre = "Antonio";
   document.getElementById('name').value = nombre;
   document.formtxt.submit();	
}


</script>
</head>
<body>

<input type="button" onclick="sendData('maketxt.php');"value="test" />

<form name="formtxt" action="maketxt.php">

<input type="hidden" id="name" name="name"/>

</form>

</body>
</html

Lo que hago es que al obtener los datos en js (en este simple ejemplo creo el valor en la variable nombre) los meto en un input hidden y seguidamente hago el submit hacia la pagina que me ha de crear el txt. De esta forma si me crea el archivo txt para ser descargado y se mantiene en la misma pagina ; )

Gracias por responder!
Espero que le sirva a alguien!

Nashi · #4 (**permalink**) 20/12/2009, 22:58

Vaya, parece ser que en Firefox si que baja el archivo pero en IE no, simplemente lo muestra por pantalla. Alguien sabria pq? : )

Editado: Ya esta solucionado, parece ser que en la cabecera habia tocado algo : D

Gracias!