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

download base64 file javascript

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 pedirles que lo guarden?

Answer 1

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

HTML5 rockea cara a cara

Lista de correo de W3C en FileSytem API

Answer 2

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.

Answer 3

Como se mencionó anteriormente, filesaver es un gran paquete para trabajar con archivos en el lado del cliente. Pero, no se hace bien con archivos grandes. StreamSaver.js es una solución alternativa (que se señala en FileServer.js) que puede manejar archivos grandes:

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

Answer 4

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.

Answer 5

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.

Answer 6

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

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 módulo de ahorro

Answer 7

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

Answer 8

Incluso puede hacer uno mejor que solo los URI: utilizando Chrome, también puede sugerir el nombre que tomará el archivo, como se explica en esta publicación del blog sobre cómo nombrar una descarga cuando se usan URI .

Answer 9

Para mí esto funcionó perfectamente, con el mismo nombre de archivo y la extensión que se descargan

<a href={"data:application/octet-stream;charset=utf-16le;base64," + file64 } download={title} >{title}</a>

''título'' es el nombre del archivo con la extensión ie, sample.pdf , waterfall.jpg , etc.

''file64'' es el contenido de base 64 o menos así decir, Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO

Answer 10

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 .

Answer 11

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.

Answer 12

Si solo desea convertir una cadena para que esté disponible para su descarga, puede intentarlo utilizando jQuery.

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

Answer 13

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

Answer 14

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

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

Cada vez que llama a createObjectURL (), se crea una nueva URL de objeto, 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 los liberarán automáticamente cuando se descargue el documento; Sin embargo, para obtener un rendimiento óptimo y el uso de la memoria, si hay momentos seguros en los que puede descargarlos explícitamente, debe hacerlo.

Answer 16

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

Answer 17

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