una - download file object javascript




Cree un archivo en la memoria para que el usuario lo descargue, no a través del servidor (12)

¿Hay alguna manera de que pueda crear un archivo de texto en el lado del cliente y pedirle al usuario que lo descargue, sin ninguna interacción con el servidor? Sé que no puedo escribir directamente en su máquina (seguridad y todo), pero ¿puedo crear y pedirles que lo guarden?



Basado en la respuesta @Rick que fue realmente útil.

Tienes que escapar los data la cadena si quieres compartirlos de esta manera:

$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+ encodeURI(data));

`Lo siento, no puedo comentar sobre la respuesta de @ Rick debido a mi baja reputación actual en .

Una sugerencia de edición fue compartida y rechazada.


El siguiente método funciona en IE11 +, Firefox 25+ y Chrome 30+:

<a id="export" class="myButton" download="" href="#">export</a>
<script>
    function createDownloadLink(anchorSelector, str, fileName){
        if(window.navigator.msSaveOrOpenBlob) {
            var fileData = [str];
            blobObject = new Blob(fileData);
            $(anchorSelector).click(function(){
                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            });
        } else {
            var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
            $(anchorSelector).attr("download", fileName);               
            $(anchorSelector).attr("href", url);
        }
    }

    $(function () {
        var str = "hi,file";
        createDownloadLink("#export",str,"file.txt");
    });

</script>

Vea esto en Acción: http://jsfiddle.net/Kg7eA/

Firefox y Chrome admiten el URI de datos para la navegación, lo que nos permite crear archivos al navegar por un URI de datos, mientras que IE no lo admite por motivos de seguridad.

Por otro lado, IE tiene una API para guardar un blob, que puede usarse para crear y descargar archivos.


En realidad, ES posible - use Flash.

Puede generar el contenido con JS y luego inicializar algunos flash vars o simplemente hacer todo dentro de una película flash.

Por favor, eche un vistazo a this para algunas observaciones importantes.


Felizmente estoy usando FileSaver.js . Su compatibilidad es bastante buena (IE10 + y todo lo demás), y es muy simple de usar:

var blob = new Blob(["some text"], {
    type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");


Puede utilizar URI de datos. El soporte del navegador varía; ver Wikipedia . Ejemplo:

<a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>

El octet-stream es forzar un aviso de descarga. De lo contrario, probablemente se abrirá en el navegador.

Para CSV, puede utilizar:

<a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV Octet</a>

Prueba la demo jsFiddle .


Si el archivo contiene datos de texto, una técnica que utilizo es colocar el texto en un elemento de área de texto y hacer que el usuario lo seleccione (haga clic en área de texto y luego en ctrl-A) luego copie y luego pegue en un editor de texto.


Solución que funciona en IE10: (necesitaba un archivo csv, pero es suficiente para cambiar el tipo y el nombre de archivo a txt)

var csvContent=data; //here we load our csv data 
var blob = new Blob([csvContent],{
    type: "text/csv;charset=utf-8;"
});

navigator.msSaveBlob(blob, "filename.csv")

Solución simple para navegadores listos para HTML5 ...

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}
form * {
  display: block;
  margin: 10px;
}
<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea name="text"></textarea>
  <input type="submit" value="Download">
</form>

Uso

download('test.txt', 'Hello world!');

Todos los ejemplos anteriores funcionan bien en Chrome e IE, pero fallan en Firefox. Por favor, considere agregar un ancla al cuerpo y quitarlo después de hacer clic.

var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(['Test,Text'], {type: 'text/csv'}));
a.download = 'test.csv';

// Append anchor to body.
document.body.appendChild(a);
a.click();

// Remove anchor from body
document.body.removeChild(a);

var element = document.createElement('a');
element.setAttribute('href', 'data:text/text;charset=utf-8,' +      encodeURI(data));
element.setAttribute('download', "fileName.txt");
element.click();




client-side