Creando un archivo descargable con JavaScript

- Andrés Cruz

In english
Creando un archivo descargable con JavaScript

Ver ejemplo Descargar fuente

Generalmente cuando se desea descargar un archivo de una aplicación web se debe realizar una petición al servidor por el archivo en cuestión para posteriormente pueda ser descargado a través del navegador del usuario; con unas pocas líneas de código y empleando los data URIs es posible crear archivos para que sean descargados sin la necesidad de realizar este tipo de peticiones; el código JavaScript que veremos a continuación permite generar un archivo de texto plano (TXT) a partir de un contenido de un campo de texto; específicamente de un textarea para luego pueda ser descargado; primero veremos como armar un data URI:

Sintaxis de los data URIs

Los data URIs permiten embeber contenidos en pequeños archivos; tomando un estracto de la documentación oficial que ofrece la MDN sobre los data URIs cumplen la siguiente sintaxis:

data:[<mediatype>][;base64],<data>
<mediatype>

Permite indicar el tipo de archivo como: 

  • Texto: Texto de datos textual (legible) como text/plain (por defecto) o text/html.
  • Imagen: Datos binarios para representar imágenes: image/jpeg, image/gif, image/png.
  • Audio: Datos de sonido digital: audio/basic, audio/wav video.
  • Video: Datos de vídeo: video/mpeg.
;base64 (opcional)Si son datos planos o textuales simplemente se embebe el texto; de otra forma de debe de especificar ;base64 para embeber datos binarios como las imágenes o videos.

Paso siguiente se indica la data del archivo; ejemplo:

data:,Hello%2C%20World!

Corresponde a un archivo de texto plano.

Script para generar y descargar archivos

El HTML

<textarea id="txt"></textarea>
<a href="#" id="link" download="contenido.txt">Descargar el contenido del textarea</a>

El Javascript

    window.onload = function() {
      var txt = document.getElementById('txt');
      txt.value = window.onload + '';
	   document.getElementById('link').onclick = function(code) {
        this.href = 'data:text/plain;charset=utf-8,'
          + encodeURIComponent(txt.value);
      };
    };

¿Cómo funciona el script para generar y descargar archivos?

El corazón del script:

     document.getElementById('link').onclick = function(code) {
        this.href = 'data:text/plain;charset=utf-8,'
          + encodeURIComponent(txt.value);
      };

La función encodeURIComponent() codifica la cadena de texto y la embebe dentro del atributo href del enlace para su descarga a través del atributo download del mismo enlace al detectar un clic.

Artículo original: JAVASCRIPT – CREATING A DOWNLOADABLE FILE IN THE BROWSER.

Ver ejemplo Descargar fuente

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.