DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
04-12-2014

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],
<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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

FastClick para eliminar el delay de los 300ms

FastClick para eliminar el delay de los 300ms

Burbujas flotantes con JavaScript

Burbujas flotantes con JavaScript

Algunos artículos que te pueden interesar

¿Cómo agregar markers (POIs) en Google Maps?

¿Cómo agregar markers (POIs) en Google Maps?

Utilizando la API de Google Maps para mostrar la ubicación del usuario.

Andrés Cruz 01-05-2014

Probando las transformaciones 3d con anime.js

Probando las transformaciones 3d con anime.js

Andrés Cruz 01-09-2016

Usando la API de Visibilidad de Página  en JavaScript

Usando la API de Visibilidad de Página en JavaScript

La API de Visibilidad de Página permite saber cuando una página web está siendo visualizada por el usuario y por ende podemos realizar las configuraciones para evitar el uso de recursos innecesarios.

Andrés Cruz 09-03-2015