Cómo crear un archivo y generar descarga con JavaScript en el navegador (sin servidor)

¿Generar y descargar un archivo usando Javascript? Si lo piensa bien, esto no es tan seguro como cree y no debería permitirse sin la interacción del usuario (sin embargo, ahora está permitido).

Imagina que usas Google Chrome y tienes habilitada la opción "Auto-abrir archivos descargados", y para tu mala suerte ingresas en un sitio web malicioso y genera la descarga de un archivo desconocido. Sabes cómo termina esta historia.

Sin embargo, en los navegadores más recientes, las extensiones de archivo descargadas desconocidas o raras se bloquean y aparece un mensaje si realmente desea abrir ese archivo (al menos en Chrome).

Por lo tanto, la descarga automática de archivos ha sido difícil de lograr en los últimos años, pero ahora con la introducción de HTML5, esta tarea se ha vuelto más fácil de lograr.

En este artículo te vamos a mostrar un par de trucos para generar y descargar directamente un archivo usando Javascript puro.

Función de descarga autoempleada

La siguiente función simple le permite generar una descarga de un archivo directamente en el navegador sin contactar con ningún servidor. Funciona en todos los navegadores compatibles con HTML5, ya que utiliza el atributo de descarga del elemento <a>:

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

// Start file download.
download("hello.txt","This is the content of my file :)");

El atributo de descarga especifica que el destino se descargará cuando un usuario haga clic en el hipervínculo. Este atributo solo se utiliza si se establece el atributo href.

Puede ver este fragmento en acción en el siguiente fiddle:

Usando una biblioteca

Haz bibliotecas, no la guerra. FileSaver.js implementa la saveAs()interfaz FileSaver en navegadores que no la admiten de forma nativa.

Si necesita guardar archivos realmente grandes más grandes que la limitación de tamaño del blob o no tiene suficiente RAM, eche un vistazo al StreamSaver.js más avanzado que puede guardar datos directamente en el disco duro de forma asincrónica con el poder de los nuevos flujos. API. Eso contará con soporte para el avance, cancelación y saber cuándo se termina de escribir.

El siguiente fragmento te permite generar un archivo (con cualquier extensión) y descargarlo sin contactar con ningún servidor:

var content = "What's up , hello world";
// any kind of extension (.txt,.cpp,.cs,.bat)
var filename = "hello.txt";

var blob = new Blob([content], {
 type: "text/plain;charset=utf-8"
});

saveAs(blob, filename);

La siguiente tabla muestra la compatibilidad de FileSaver.js en diferentes navegadores:

Nota: aunque es compatible con los navegadores más recientes, hay un par de trucos que debe conocer para brindar soporte completo.

IE <10

Es posible guardar archivos de texto en IE <10 sin polyfills basados ​​en Flash. Consulte ChenWenBrian y koffsyrup'ssaveTextAs() para obtener más detalles.

Safari 6.1+

A veces, los blobs pueden abrirse en lugar de guardarse; es posible que deba indicar a los usuarios de Safari que presionen manualmente ?+ Spara guardar el archivo después de abrirlo. El uso del application/octet-streamtipo MIME para forzar las descargas puede causar problemas en Safari .

iOS

saveAs debe ejecutarse dentro de un evento de interacción del usuario como onTouchDown o onClick; setTimeout evitará que saveAs se active. Debido a las restricciones en iOS saveAs se abre en una nueva ventana en lugar de descargar, si desea que esto se solucione, dígale a Apple cómo le está afectando este error.

Que te diviertas ❤️!