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

Partículas con Canvas en JavaScript

Partículas con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Eye Candy

Eye Candy

Algunos artículos que te pueden interesar

La API de Reconocimiento de Voz en JavaScript: speechRecognition()

La API de Reconocimiento de Voz en JavaScript: speechRecognition()

La API de Reconocimiento de Voz da la capacidad a nuestras aplicaciones de reconocer la voz según el idioma configurado a través del micrófono de la PC o dispositivo móvil.

Andrés Cruz 10-10-2017

El secreto de las animaciones en JavaScript (requestAnimationFrame())

El secreto de las animaciones en JavaScript (requestAnimationFrame())

En esta entrada veremos cómo realizar algunas simples animaciones en JavaScript mediante requestAnimationFrame() cuya API se encuentra integrada con Canvas.

Andrés Cruz 21-07-2015

anime.js para realizar animaciones con JavaScript

anime.js para realizar animaciones con JavaScript

Se explica cómo usar la librería para animaciones para JavaScript llamada anime.js en base a un sencillo experimento.

Andrés Cruz 24-08-2016