Tabla de contenido
Una vez más aquí. Hoy vengo a dejar publicado en esta web un pequeño artículo en el que vamos a ver cómo se puede convertir casi cualquier texto en un archivo, y descargarlo en diferentes formatos como txt, sh, html, css, docs,, etc. usando JavaScript estándar. Estas extensiones vienen dadas por los tipos MIME disponibles..
Como decía, hoy vamos a ver cómo crear un proyecto simple, pero que a algunos puede resultarles útil, y que nos servirá para convertir texto a un archivo, para después poder descargarlo, utilizando para ello JavaScript.
En este proyecto los usuarios veremos que hay un cuadro de texto para escribir lo que queramos, otro cuadro de entrada para darle el nombre al archivo a descargar, opciones de selección y un botón para guardar el archivo. Podremos escribir lo que queramos en el cuadro de texto, seleccionar el formato del archivo y pulsar sobre el botón ‘Guardar como …‘. Esta acción guardará un nuevo archivo en nuestro equipo con el nombre que escribamos. El nombre del archivo no es obligatorio y, si no lo proporciona, el archivo se guardará con un nombre único. Además podemos borrar el contenido del cuadro de texto y del campo del nombre haciendo clic en el botón «Borrar«.
Guardar texto como archivo en JavaScript
Para crear este proyecto vamos a utilizar tres sencillos archivo. Por eso vamos a crear uno HTML, otro CSS y el tercero JS. Dentro de cada uno de ellos, solo será necesario pegar el código correspondiente que veremos a continuación. Esto tres archivos los voy a guardar dentro de la misma carpeta, aun que cumplir las buenas prácticas, los suyo es poner el css y su carpeta css y el javascript en su carpeta js. Pero como digo, esto no se hizo para este ejemplo.
HTML
Como decíamos, el primero de los archivos que vamos a crear es el archivo HTM, en el que vamos a crear la estructura de nuestra aplicación. A este archivo lo vamos a llamar index.html, y dentro solo es necesario pegar el código que vamos a ver a continuación.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Guardar text en un archivo con JavaScript</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="titulo">Guardar texto como un archivo</div>
<div class="cuerpo">
<textarea placeholder="Escribe lo que quieres guardar" id="textarea1" required>
Este ejemplo sirve para guardar textos en un archivo. Nos va a dar la posibilidad de seleccionar la extensión de este archivo.
Entre los diferentes tipos de archivos que se pueden guardar encontraremos TXT, DOC, PPT, HTML, CSS, JSON, JS, XML, MD y SH.
Esta aplicación se ha creado utilizando JavaScript, HTML, y un poco de CSS para darle un poco de color.
Los diferentes tipos de archivos que se pueden descargar, se han sacado de los tipos MIME</textarea>
<div class="opciones-archivo">
<div class="opcion nombre-archivo">
<label>Nombre del archivo</label>
<input type="text" placeholder="Nombre del archivo" id="nombre" />
<!--Nombre que le vamos a dar al archivo-->
</div>
<div class="opcion guardar-como">
<label>Guargar como</label>
<div class="selec-menu">
<select>
<!--listado de posibilidades de tipos MIME-->
<option value="text/plain">TXT (.txt)</option>
<option value="application/msword">DOC (.doc)</option>
<option value="application/vnd.ms-powerpoint">PPT (.ppt)</option>
<option value="text/html">HTML (.html)</option>
<option value="text/css">CSS (.css)</option>
<option value="text/javascript">JS (.js)</option>
<option value="application/json">JSON (.json)</option>
<option value="application/xml">XML (.xml)</option>
<option value="text/markdown">MD (.md)</option>
<option value="application/x-sh">SH (.sh)</option>
</select>
</div>
</div>
</div>
<button class="guardar-btn" type="button">
Guardar como archivo TXT
</button>
<input class="guardar-btn" type="button" value="Borrar" onclick="borrarTexto();" />
</div>
<script src="script.js" defer></script>
<!-- JavaScript para guardar el archivo-->
</body>
</html>CSS
El segundo archivo que vamos a crear será el archivo css. Este se va a llamar style.css, y nos servirá para darle un bonito estilo a este ejemplo. Como en el anterior archivo, solo necesitaremos copiar y pegar dentro del archivo las reglas css que vamos a ver a continuación:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Comic Sans MS', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 10px;
background: #380058;
}
/* Titulo con efecto fluorescente */
.titulo {
position: absolute;
margin-bottom: 14em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
border: none;
font: normal 48px/normal "Warnes", Helvetica, sans-serif;
color: rgba(255, 255, 255, 1);
text-decoration: normal;
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
white-space: pre;
text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}
.titulo:hover {
text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #00ffff, 0 0 70px #00ffff, 0 0 80px #00ffff, 0 0 100px #00ffff;
}
/* el cuerpo de la aplicación */
.cuerpo {
width: 445px;
border-radius: 8px;
background: #fff;
padding: 30px 25px 40px;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
.cuerpo :where(textarea, input, select, button) {
width: 100%;
outline: none;
border: none;
font-size: 18px;
border-radius: 5px;
}
.cuerpo :where(textarea, input)::placeholder {
color: #aaa;
}
.cuerpo :where(textarea, input):focus {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
}
.cuerpo textarea {
height: 270px;
resize: none;
padding: 8px 13px;
font-size: 18px;
border: 1px solid #ccc;
}
.cuerpo .opciones-archivo {
display: flex;
margin-top: 10px;
align-items: center;
justify-content: space-between;
}
.cuerpo .guardar-btn {
color: #fff;
cursor: pointer;
opacity: 0.8;
padding: 16px 0;
margin-top: 20px;
pointer-events: none;
background: #7017b8;
}
/* botón guardar y borrar */
.guardar-btn:hover {
background: #431766;
}
textarea:valid~.guardar-btn {
opacity: 1;
pointer-events: auto;
transition: all 0.2s ease;
}
.opciones-archivo .opcion {
width: calc(100% / 2 - 8px);
}
.opcion label {
font-size: 18px;
}
.opcion :where(input, .selec-menu) {
height: 50px;
padding: 0 13px;
margin-top: 6px;
border-radius: 5px;
border: 1px solid #bfbfbf;
}
.opcion .selec-menu select {
height: 50px;
background: none;
}
/* reglas para pantallas más pequeñas */
@media screen and (max-width: 656px) {
.titulo {
font: normal 36px/normal "Warnes", Helvetica, sans-serif;
margin-bottom: 18em;
}
}
@media screen and (max-width: 480px) {
.cuerpo {
padding: 25px 18px 30px;
}
.cuerpo :where(textarea, input, select, button, label) {
font-size: 16px !important;
}
.cuerpo .guardar-btn {
padding: 15px 0;
}
.opciones-archivo .opcion {
width: calc(100% / 2 - 5px);
}
.opcion :where(input, .select-menu) {
padding: 0 10px;
}
.titulo {
font: normal 24px/normal "Warnes", Helvetica, sans-serif;
margin-bottom: 24em;
}
}JavaScript
Por último, vamos a crear un archivo JavaScript, con el nombre script.js. Dentro pegaremos el siguiente código:
// Tomamos los valores del html
const textarea = document.querySelector("textarea"),
fileNameInput = document.querySelector(".nombre-archivo input"),
selecMenu = document.querySelector(".guardar-como select"),
Btnguardar = document.querySelector(".guardar-btn");
Btnguardar.addEventListener("click", () => {
const blob = new Blob([textarea.value], {type: selecMenu.value});
const ArchivoUrl = URL.createObjectURL(blob);
const link = document.createElement("a");
link.download = fileNameInput.value;
link.href = ArchivoUrl;
link.click();
});
selecMenu.addEventListener("change", () => {
const selectedFormat = selecMenu.options[selecMenu.selectedIndex].text;
Btnguardar.innerText = `Guardar como archivo ${selectedFormat.split(" ")[0]}`;
});
// Función para borrar los campos textarea y el nombre del archivo
function borrarTexto() {
document.getElementById("textarea1").value = "";
document.getElementById("nombre").value = "";
}Y con estos códigos, ya podemos ejecutar el archivo index.html y ver funcionando nuestra aplicación para guardar texto como un archivo seleccionando la extensión del archivo a guardar. Si quieres ver funcionando este ejemplo, puedes hacerlo desde la sección de ejemplos de esta web.
