Generar un archivo de texto en el navegador a partir de un formulario

generar-un-archivo-de-texto-en-el-navegador-a-partir-de-un-formulario.markdown

Generar un archivo de texto en el navegador a partir de un formulario

A Pen by Joel Alejandro Villarreal Bertoldi on CodePen.

License.

index.html

<form id="form">
  Nombre:
  <input type="text" class="input" name="Nombre">
  <br>
  E-mail:
  <input type="text" class="input" name="Email">
  <br>
  Mensaje:<br>
  <textarea class="input" name="Mensaje"></textarea>
  <button type="submit">Generar .txt</button>
</form>

script.js

// Obtengo referencia al formulario HTML que tenga asignado id="form"
const form = document.querySelector("#form");

// Agrego una función al evento "submit" para que cuando se haga
// click en el <button type="submit"> que contiene el formulario
// se ejecute dicha función.
form.addEventListener("submit", event => {
  // Evito que el formulario me lleve a otra página.
  event.preventDefault();
  
  // Selecciono todos los elementos que quiera incluir en el archivo.
  // En este ejemplo, todos los elementos que tengan el atributo
  // class="input" se van a incluir.
  const inputs = [...document.querySelectorAll(".input")];
  
  // Defino una variable para separar en líneas.
  const EOL = "\r\n";
  
  // Construyo el contenido del archivo de texto con un objeto tipo Blob
  // (esto permite también contenido binario).
  const textFile = new Blob(
    /* 
      Por cada elemento input, escribo: el nombre del campo
      (obtenido de el atributo "name"), inserto un separador de línea,
      el contenido del campo (que puede venir de "innerHTML" si es un
      <textarea> o de "value" si es cualquier otro tipo de campo),
      y dos separados de línea para dejar espacio al siguiente campo.
    */
    inputs.map(input => `${input.name}${EOL}${input.innerHTML || input.value}${EOL}${EOL}`), 
    /*
      Especifico que el archivo es de texto plano.
    */
    { type: "text/plain" }
  );
 
  // Genero un elemento de tipo <a> para simular un descargable.
  // Esta es la única forma de convertir el blob en una entidad que
  // se pueda descargar.
  const downloader = document.createElement("a");
  
  // Genero una URL privada para que el navegador pueda mostrar
  // el contenido del archivo que generamos en el blob más arriba.
  downloader.href = window.URL.createObjectURL(textFile);
  
  // Establezco el nombre del archivo con el que quiero que se descargue.
  downloader.download = "formulario.txt";
  
  // Simulo un "click" sobre el elemento para disparar la acción de descarga.
  // IMPORTANTE: es posible que el navegador pida un permiso sobre la página
  // para "descargar múltiples archivos".
  downloader.click();
  
  // Una vez que se haya iniciado la descarga, elimino el enlace privado
  // y elimino el descargador para mantener la memoria de la página limpia.
  window.requestAnimationFrame(() => {
    window.URL.revokeObjectURL(textFile);
    downloader.remove();
  });
});