En este post te mostraré cómo crear un archivo de texto en el navegador con JavaScript, escribir contenido dentro del mismo y luego forzar su descarga. Básicamente vamos a guardar un Blob con JS.
De este modo vas a poder generar un txt con JS y descargarlo. Además, con lo que te mostraré podrás generar un CSV o cualquier tipo de archivo siempre y cuando sepas estructurarlo.
Todo lo que aprenderás será aplicado del lado del cliente, así que no harás llamadas al servidor. Por cierto, usaremos Blob y URL.createObjectURL.
Podemos crear un Blob con cualquier contenido (podríamos crear imágenes, archivos comprimidos, etcétera).
En este caso crearemos uno con un simple texto, y en las opciones vamos a indicar que será uno de texto plano:
const archivo = new Blob([contenido], { type: 'text/plain' });El contenido del archivo debe ser un arreglo, por ello es que va entre llaves. Este arreglo podría tener más elementos. En este caso contenido es una cadena.
Ahora que tenemos nuestro Blob vamos a generar una URL para el mismo. Para ello usamos URL.createObjectURL así:
const url = URL.createObjectURL(archivo);Y ahora que ya tenemos la URL podemos colocarla en un elemento a, mostrarla al usuario, abrirla en una nueva pestaña, etcétera. Yo lo que haré será colocarlo en un a oculto y darle clic.
Veamos entonces la función completa para crear un archivo con JavaScript. En este caso va a recibir el contenido y el nombre del archivo, quedando así:
const guardarArchivoDeTexto = (contenido, nombre) => {
const a = document.createElement("a");
const archivo = new Blob([contenido], { type: 'text/plain' });
const url = URL.createObjectURL(archivo);
a.href = url;
a.download = nombre;
a.click();
URL.revokeObjectURL(url);
}Lo que te decía del elemento a está en la línea 5. Por cierto, con el atributo download establecemos la sugerencia para nombrar al archivo, algo así como cuando descargamos un canvas.
Ahora solo queda invocar a esa función cuando tú quieras crear un archivo de texto con JavaScript del lado del cliente con:
guardarArchivoDeTexto("el contenido", "nombre.txt");
Aquí te dejo un ejemplo. Básicamente se crea y descarga un archivo al hacer clic en el botón, quedando así el código completo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Descargar txt con JS</title>
</head>
<body>
<button id="descargar">Descargar TXT</button>
</body>
<script>
const guardarArchivoDeTexto = (contenido, nombre) => {
const a = document.createElement("a");
const archivo = new Blob([contenido], { type: 'text/plain' });
const url = URL.createObjectURL(archivo);
a.href = url;
a.download = nombre;
a.click();
URL.revokeObjectURL(url);
}
const $botonDescargar = document.querySelector("#descargar");
$botonDescargar.onclick = () => {
guardarArchivoDeTexto("Este es el contenido del archivo", "archivo.txt");
}
</script>
</html>La llamada a la función está en la línea 26. Si te gusta este lenguaje te dejo con más posts sobre JavaScript.
En este post te quiero compartir un código de C++ para listar y cancelar trabajos…
Gracias a WebAssembly podemos ejecutar código de otros lenguajes de programación desde el navegador web…
Revisando y buscando maneras de imprimir un PDF desde la línea de comandos me encontré…
Esta semana estuve recreando la API del plugin para impresoras térmicas en Android (HTTP a…
Hoy te enseñaré a extraer la cadena base64 de una clave PEM usando una función…
Encender un foco con un Bot de Telegram es posible usando una tarjeta como la…
Esta web usa cookies.
Ver comentarios
Hola, pero si no quiero descargar el archivo sino guardarlo en una ruta como lo hago?
Hola. Gracias por sus comentarios. Si tiene alguna consulta con gusto lo atiendo en https://parzibyte.me/#contacto
Saludos!