[SOLUCIONADO] Generar una imagen/pdf/documento desde un textarea

neglivv · #1 (**permalink**) 25/02/2013, 14:06

Hola a todos! creo que el titulo suena un poco descabellado...

El problema es:
Tengo un textarea, me gustaría que al dar click al botón "Guardar" se genere una imagen/pdf/documento con lo que esta en el textarea.
intenté generar un PDF con lo que hay aquí http://www.forosdelweb.com/f53/impri...xtarea-526394/
me funciono perfecto en chrome pues tiene lo de imprimir a pdf integrado, pero en firefox no, y es ahí donde debe funcionar

Luego se me ocurrió buscar alguna manera de tomar el contenido del textarea y convertirlo en imagen o en un documento (word por ejemplo)... es esto posible?

PD: por razones ajenas a mi voluntad no puedo usar ningún lenguaje del lado del servidor es posible hacer lo que pido con javascript?

Gracias de antemano!

Panino5001 · #2 (**permalink**) 25/02/2013, 14:29

Si es para Firefox esto te servirá:

Código:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script> 
function salvar(t){ 
            window.location='data:application/octet-stream;base64,'+btoa(t); 
} 

</script> 
</head> 

<body> 
<form id="form1" name="form1"> 
  <textarea name="textarea" cols="80" rows="5" id="textarea"></textarea> 
  <input onclick="salvar(textarea.value)" type="button" name="Submit" value="descargar como txt" id="Submit" /> 
</form> 

</body> 
</html>

neglivv · #3 (**permalink**) 26/02/2013, 10:14

Gracias por tu respuesta Panino5001.
Ya probé lo que me dices pero lo que hace es que me descarga un archivo con un formato .part vacío =S
Necesito que lo que esté en el textarea se guarde en un archivo PDF o una imagen, ya que el textarea contendrá texto formateado. Estoy usando un script llamado nicEdit para que el textarea contenga los controles de negritas, cursiva, etc. y necesito que eso se refleje en el archivo que imprimo (así como si fuera un office word)

Alguna otra sugerencia?

Panino5001 · #4 (**permalink**) 26/02/2013, 10:37

Si no escribís nada en el textarea te aparecerá vacío. Si escribís algo, te aparecerá lo que hayas escrito en ese archivo que se te descarga. Y si lo que necesitás es generar un word con formato, tendrás que cambiar varias cosas y estudiar cómo funciona el formato rtf.

Si querés generar una imagen, una posibilidad es usar canvas y el método toDataURL. Aunque quizá en ese caso ya te convenga usar un prefabricado como html2canvas

emprear · #5 (**permalink**) 26/02/2013, 13:18

Esto te puede servir
http://www.html5tutorial.info/html5-canvas-text.php

No trabajo mucho con canvas, pero con ese método, una vez generado el texto en el canvas, haciendo click derecho sobre el mismo se puede guardar como una imagen.
Para descargarlo de otra forma, es más complicado, podrias convertir el contenido del canvas a base64, y hacer algo como esto

Código HTML:

Ver original<a download="migato.jpg" href="data:application/octet-stream;base64,/9j/4AAQSkZJRgABAQEAAgACAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAoAB4DASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAABwAFBggE/8QALhAAAgEDAwIFAwMFAAAAAAAAAQIDBAURABIhBjEHEyJBUWGBkQgUcSMkMkJi/8QAFwEBAQEBAAAAAAAAAAAAAAAAAQIDBP/EABsRAAICAwEAAAAAAAAAAAAAAAABAhESITED/9oADAMBAAIRAxEAPwDW3nqRL5VdEW+ogejqjW/31O1O0WcLgLk+r/Fvbg7s/TV30jdLNf7peKAvSxTU8r08aU+99hXO8sCPTgnb7EbeMZ5NnIqvFW2U7vUtSSsU3VDlZI1JbDb87s8KoYjIwFyccnXV8t46W696olstyqYLibnM7bHKuFLOQx559JPP/R+dcq2zWjriqpFqLKjEIayGAmUxxgISuN3bknK9gQPn2167tbaWmt6o8SkmXOCoLHjucfYY9tctdGX/AKq6k6tslP1JeK+S2UY/cPDGx2lu6B1TG7LMM5zxnT7W9c2Wfcs01WJY22eUaWQgYyCScYJ/jj8nVKkyWmEVFVJH1vQ3SMOzGoXO8cLkDjPG4Zzxxo3/AFC3V5PE+4yUhVd6xMzQ5UO3lr6sfxpZhanSRglHBhcIuIyN3yfyT+NAfirip6sr5oW9COEKn2OOcany3IufDeeCNehpatp8I6zLPx/uBg4+xHA+utzf6uGSplfypZEklZwThe/PIU8HnRP4MPFHLVNUr5sfoBU+26RR9+M8aYqZ7TVyzx09NAzLIxZhnGMnAPPfHv8AGNE1Uxjwob1YRc6WOCkrY7ahJMskceZT8bcnjnPPfWEu/hdVwqWtlzirnkfL+cPLK47HknOpqahTceDimW/RfSF36eu52VdsekdFEylmZgPYjKgZBB99IaxxhP6oiD57pIcH66mpoycnsapH/9k=">Avatar Emprear</a>

Pero el atributo download para especificar el nombre de archivo, hasta donde ví solo lo entiende Chrome. Además en IE no funciona.
En otros casos para poner un nombre de archivo usan php (bueno, si pudieses usar php te diría que uses alguna clase para crear pdf.
Concluyendo, el primer link sería lo mas indicado y bajar con click derecho.
Quizás a @Panino5001, que es bastante más hábil con esto del canvas, quizás se le ocurra como hacerlo
Saludos

neglivv · #6 (**permalink**) 27/02/2013, 12:13

Cita:

Iniciado por Panino5001

Si no escribís nada en el textarea te aparecerá vacío. Si escribís algo, te aparecerá lo que hayas escrito en ese archivo que se te descarga. Y si lo que necesitás es generar un word con formato, tendrás que cambiar varias cosas y estudiar cómo funciona el formato rtf.

Si querés generar una imagen, una posibilidad es usar canvas y el método toDataURL. Aunque quizá en ese caso ya te convenga usar un prefabricado como html2canvas

Panino5001: Yo lo probé escribiendo cosas en el textarea y aun así descargaba el archivo vacío.

emprear: gracias por la idea! lo probé y funcionó, solo un pequeño detalle: al tratarse de texto enriquecido coloca en en canvas las etiquetas <p> <br>... y todo eso, alguna idea para solventar eso? estuve buscando y no se me ocurrió ninguna

PD: encontré esto para generar una imagen a partir del canvas http://www.zonaw.com/convertir-una-i...nvas-a-imagen/ donde hablan de lo que comentas, Panino5001

neglivv · #7 (**permalink**) 05/03/2013, 09:21

Hola a todos! es para informarles que ya "solucioné" mi problema.
Decidí usa la función print() de javascript. Probé con varias librerías de javascript que creaban un pdf del lado del cliente, pero lamentablemente no funcionaron. Decidí hacerlo así ya que la herramienta que estoy desarrollando será para ubuntu, probando me di cuenta de que ahí firefox tiene la opción de guardar en pdf.
Acá mi código, por si a alguien le es de utilidad:

Código HTML:

<script type="text/javascript">
function imprimir() { 
	var titulo = document.getElementById("titulo");
	var contenido = tinyMCE.get("elm1").getContent();//este es un textarea de tinyMCE
	//var imagenes = document.getElementById("imagenes");
	var ventimp = window.open(' ', 'popimpr'); 
	ventimp.document.write("<div style='text-align:center; font-size:19px; font-weight:bold;'>" + titulo.value + "</div>");
	ventimp.document.write( "<br>" + contenido);
	ventimp.document.close(); 
	ventimp.print( ); 
	ventimp.close(); 
} 
</script>

PD: las librerías que probé fueron: jspdf y bytescoutpdf, los problemas que encontré fueron:
1.- En firefox no generaba el PDF (la pantalla quedaba en blanco)
2.- Aun no cuentan con una función que generen pdf con texto enriquecido. bytescoutpdf solo permite las etiquetas <b> y <i>.

De todas maneras, muchas gracias por sus comentarios y sugerencias