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.

Creando archivo

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:

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.

URL para el archivo

Ahora que tenemos nuestro Blob vamos a generar una URL para el mismo. Para ello usamos URL.createObjectURL así:

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.

Función para crear archivo con JS

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í:

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");

Poniendo todo junto

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:

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.