
En esta entrada veremos como generar un archivo a partir de un contenido de un campo de texto para su descarga en un archivo de texto plano.
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:
|
;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.

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