javascript - validacion - validar formulario jquery

Descargue los contenidos de textarea como un archivo usando solo Javascript(sin servidor)

Question

Me piden que haga un botón de "descarga" que descarga los contenidos de un área de texto en la misma página que un archivo, con el cuadro de diálogo "Guardar como ..." del navegador que aparece. Copiar / pegar haría el trabajo bien, pero es un "requisito".

En este momento, solo estoy publicando el contenido del área de texto en el servidor, que los echó atrás con Content-disposition: attachment . ¿Hay alguna manera de hacer esto con solo JavaScript del lado del cliente?

Answer 1

Podría intentar window.location = "data:application/octet-stream,"+text pero eso no proporciona un mecanismo a través del cual pueda sugerir un nombre, y también IE tiene un límite muy pequeño en la longitud máxima de un dato URI que podría ser un problema.

Answer 2

Respuesta corta: no es posible. Debe enviarlo al servidor y la respuesta del servidor puede ser "Disposición de contenido: archivo adjunto".

Answer 3

Podría ser posible creando un marco, escribiendo contenido allí, luego llamando a document.execCommand(''saveas'', ...) en IE y algo con nsIFilePicker en Mozilla, pero creo que eso requeriría algunos privilegios extraordinarios (como ser parte de el navegador en sí).

Answer 4

Hubo algunas bibliotecas de JavaScript que hicieron este tipo de cosas, a través de un pequeño archivo SWF incrustado. Por ejemplo este .

Answer 5

Encontré una solución simple aquí: http://www.codingforums.com/archive/index.php/t-181561.html

My text area:<br />
<textarea rows=''10'' cols=''80'' id=''myTextArea'' ></textarea>

<br /><br />

Download button: <br />
<input value=''download'' type=''button''
onclick=''doDL(document.getElementById("myTextArea").value)'' />


<script type=''text/javascript''>
function doDL(s){
    function dataUrl(data) {return "data:x-application/text," + escape(data);}
    window.open(dataUrl(s));
}
</script>

Espero que ayude

Answer 6

Esto puede ser lo que está buscando: http://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/

Utiliza el diálogo de descarga del navegador, pero solo admite FF y Chrome, y tal vez más navegadores ahora.

Editar:

Como comenté, insertaré el código del artículo:

function saveTextAsFile()
{
    var textToWrite = //Your text input;
    var textFileAsBlob = new Blob([textToWrite], {type:''text/plain''});
    var fileNameToSaveAs = //Your filename;

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    if (window.webkitURL != null)
    {
        // Chrome allows the link to be clicked
        // without actually adding it to the DOM.
        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    }
    else
    {
        // Firefox requires the link to be added to the DOM
        // before it can be clicked.
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
    }

    downloadLink.click();
}

Answer 7

Es absolutamente posible utilizar esta implementación de JavaScript de navegador cruzado de la función HTML5 saveAs : https://github.com/koffsyrup/FileSaver.js

Si todo lo que quiere hacer es guardar texto, la secuencia de comandos anterior funciona en todos los navegadores (incluidas todas las versiones de IE), no se requiere SWF.