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