Crear un archivo en la memoria para que el usuario lo descargue, no a través del servidor

Question

¿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 solicitar que lo guarde?

Answer 1

Puede usar los 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> 

La corriente de octeto consiste en forzar una solicitud 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 el jsFiddle demo.

Answer 2

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 algunos comentarios importantes.

Answer 3

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

Answer 4

Incluso puede hacer uno mejor que solo URI: con Chrome también puede sugerir el nombre del archivo, como se explica en this blog post about naming a download when using URIs.

Answer 5

Estoy felizmente usando FileSaver.js. Su compatibilidad es bastante buena (IE10 + y todo lo demás), y es muy fácil de usar:

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

Answer 6

solución simple para navegadores listos 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!'); 

Answer 7

solución que funciona en IE10: (necesitaba un archivo csv, pero es suficiente para cambiar el tipo y nombre de archivo de 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") 

Answer 8

Todo el ejemplo anterior funciona bien en Chrome e IE, pero fallan en Firefox. Considere agregar un anclaje al cuerpo y extraerlo 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); 

Answer 9

El siguiente método funciona en IE11 +, Firefox y Chrome 25+ 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> 

ver esto en acción: http://jsfiddle.net/Kg7eA/

Firefox y Chrome URI de datos de apoyo para la navegación, que permite nosotros para crear archivos navegando a un URI de datos, mientras que IE no lo admite por razones de seguridad.

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

Answer 10

A partir de abril de 2014, las API de FileSytem no pueden estandarizarse en W3C. Cualquiera que mire la solución con blob debería enhebrar con precaución, supongo.

HTML5 rocks heads up

W3C Mailing List on FileSytem API

Answer 11

Si lo que desea es convertir una cadena a estar disponible para su descarga puede probar esta usando jQuery.

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

Answer 12

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

Answer 13

Esta solución se extrae directamente desde el repositorio github de tiddlywiki (tiddlywiki.com). He utilizado tiddlywiki en casi todos los navegadores y funciona como un encanto:

function(filename,text){ 
    // Set up the link 
    var link = document.createElement("a"); 
    link.setAttribute("target","_blank"); 
    if(Blob !== undefined) { 
     var blob = new Blob([text], {type: "text/plain"}); 
     link.setAttribute("href", URL.createObjectURL(blob)); 
    } else { 
     link.setAttribute("href","data:text/plain," + encodeURIComponent(text)); 
    } 
    link.setAttribute("download",filename); 
    document.body.appendChild(link); 
    link.click(); 
    document.body.removeChild(link); 
} 

Github repo: Download saver module

Answer 14

Basado en @Rick respuesta que fue muy útil.

Tienes que escapar de la cadena data si desea compartir 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 StackOverflow.

Un edit suggestion fue compartido y rechazado.

Answer 15

Todas las soluciones anteriores no funcionaron en todos los navegadores. Esto es lo que finalmente funciona en IE 10+, Firefox y Chrome (y sin jQuery o cualquier otra biblioteca):

save: function(filename, data) { 
    var blob = new Blob([data], {type: 'text/csv'}); 
    if(window.navigator.msSaveOrOpenBlob) { 
     window.navigator.msSaveBlob(blob, filename); 
    } 
    else{ 
     var elem = window.document.createElement('a'); 
     elem.href = window.URL.createObjectURL(blob); 
     elem.download = filename;   
     document.body.appendChild(elem); 
     elem.click();   
     document.body.removeChild(elem); 
    } 
} 

Tenga en cuenta que, dependiendo de su situación, también puede llamar a URL.revokeObjectURL después de retirar elem . De acuerdo con la documentación para URL.createObjectURL:

cada vez que llame createObjectURL(), se crea un nuevo objeto URL, incluso si ya ha creado una para el mismo objeto. Cada uno de estos debe liberarse llamando a URL.revokeObjectURL() cuando ya no los necesite. Los navegadores lanzarán estos automáticamente cuando el documento esté descargado; sin embargo, para un rendimiento óptimo y uso de la memoria, si hay momentos seguros en los que puede descargarlos explícitamente, debe hacerlo.

Answer 16

Según lo mencionado sobre filesaver es un paquete de parrilla para trabajar con archivos en el lado del cliente. Pero no es bueno tratar con archivos grandes. StreamSaver.js es una solución alternativa (que se señaló en FileServer.js) para tratar con archivos de gran tamaño:

const fileStream = streamSaver.createWriteStream('filename.txt', size); 
const writer = fileStream.getWriter(); 
for(var i = 0; i < 100; i++){ 
    var uint8array = new TextEncoder("utf-8").encode("Plain Text"); 
    writer.write(uint8array); 
} 
writer.close()