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.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
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!