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


¿Hay alguna manera de que pueda crear un archivo de texto en el lado del cliente y solicitar 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 e indicarles que lo guarden?


636
2017-09-08 06:24


origen


Respuestas:


Puede usar 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 una solicitud de descarga. De lo contrario, probablemente se abrirá en el navegador.

Para CSV, puede usar:

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

Prueba el demo jsFiddle.


356
2017-09-08 06:29



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!');

531
2017-08-12 21:57



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

147
2017-11-25 13:37



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, es posible que también desee llamar URL.revokeObjectURL después de eliminar elem. De acuerdo con los documentos para URL.createObjectURL:

Cada vez que llamas a createObjectURL (), se crea un nuevo objeto URL, incluso si ya has creado uno 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.


137
2017-11-05 10:42



Estoy felizmente 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");

97
2018-05-08 23:05



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>

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

Firefox y Chrome soportan el URI de datos para la navegación, que nos permite crear archivos navegando hacia 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.


18
2017-12-27 06:55



Si solo quieres convertir una cadena para que esté disponible para su descarga, puedes probar esto usando jQuery.

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

7
2018-02-02 01:25



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")

6
2017-11-08 10:32



Esta solución se extrae directamente del repositorio github de tiddlywiki (tiddlywiki.com). He usado tiddlywiki en casi todos los navegadores y funciona a las mil maravillas:

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);
}

Repo de Github: Descargar el módulo de ahorro


6
2017-07-15 18:52



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

4
2018-05-09 11:36



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

HTML5 rockea cara arriba

Lista de correo W3C en FileSytem API


3
2018-01-20 15:47