1

Tengo un código que compila un código a un archivo HTML y se descarga. Sin embargo, me da un problema serio. Cuando me pregunta que inserte el código y lo inserto, el archivo descargado no tiene todo el código que yo inserte cuando me lo preguntaron. Dicho código que se inserta es extenso. ¿Por qué está ocurriendo eso?

Aquí no funciona, pero si pega el código en TryEditor o en un bloc de notas si funcionara. TryEditor pegue el código en esa página

<html>
<body>
<script>

var nombredearchivo = prompt("Introduce el nombre de tu archivo (No añadas .html):")
if(nombredearchivo == "" || nombredearchivo == " " || nombredearchivo == "  ")  {
 nombredearchivo = "noespecificado"
}

var codigo1 = prompt("Introduce tu código HTML:")
var codigo2 = codigo1.replace(/(\r\n|\n|\r)/gm, "")
var codigo = codigo2.replace(/'/g, '"');

if(codigo == "" || codigo == " " || codigo == "  ")  {
 nombredearchivo = "<p>No has añadido codigo HTML</p>"
}
var a = document.body.appendChild(document.createElement("a"));
var textToWrite = codigo;
a.download = nombredearchivo + ".html";
textToWrite = textToWrite.replace(/\n/g, "%0D%0A");
a.href = "data:text/plain," + textToWrite;
a.click();

</script>
</body>
</html>

7
  • 2
    cual es el problema exactamente?
    – Srsole
    Commented el 26 jun. 2020 a las 10:42
  • Copia el código y pégalo en un editor de HTML. Luego pegas un código muy largo en la pregunta de "Insertar código HTML" y sin querer, el archivo compilado no contiene todo el código Commented el 26 jun. 2020 a las 10:43
  • muy largo cuanto?
    – Srsole
    Commented el 26 jun. 2020 a las 10:52
  • No sabría decirte con exactitud. 200 líneas a lo mejor o menos. Pega un código muy largo y ya está. Commented el 26 jun. 2020 a las 10:54
  • 2
    Sabiendo que prompt puede tener limitaciones dependiendo del navegador, mejor usa otra opción, como input para el nombre de archivo y textarea para el código. Además de solucionar el problema, te permitiría volver a usarlo sin tener que recargar la página.
    – Triby
    Commented el 26 jun. 2020 a las 15:54

1 respuesta 1

1

Usar un formulario es más funcional, porque es más amigable, más visual, permite un mejor manejo de errores y puedes usarlo cuantas veces sea necesario sin tener que recargar la página.

let nombre = document.querySelector('#nombre');
let codigo = document.querySelector('#codigo');
let btnSubmit = document.querySelector('#btn-submit');
let btnReset = document.querySelector('#btn-reset');
// Tener siempre el enlace para evitar crearlo cada vez
let descarga = document.querySelector('#descarga');

btnSubmit.addEventListener('click', function(e) {
    e.preventDefault();
    // Obtener valores quitando espacios en los extremos
    let nombreArchivo = nombre.value;
    let contenido = codigo.value;
    if(nombreArchivo.trim() == '') {
        nombreArchivo = 'no-especificado';
    }
    contenido = contenido.replace('/(\r\n|\n|\r)/gm', "");
    contenido = contenido.replace(/'/g, '"');
    // Verificar que el código no esté vacío, trim() elimina espacios alrededor
    if(contenido.trim() == '') {
        alert('El código HTML no puede estar vacío');
        return;
    }
    let textToWrite = contenido.replace(/\n/g, "%0D%0A");
    descarga.download = nombreArchivo + '.html';
    descarga.href = "data:text/plain," + textToWrite;
    // Clic en enlace para iniciar descarga
    descarga.click();
    // Clic en botón reset para comenzar nuevamente
    btnReset.click();
});
/* Ocultar enlace de descarga */
#descarga { display:none; }
<form id="formulario">
  <div>
    <label for="nombre">Nombre de archivo (no añadas .html):</label><br>
    <input type="text" id="nombre" size="40">
  </div>
  <div>
    <label for="codigo">Introduce tu código HTML:</label><br>
    <textarea id="codigo" cols="80" rows="10"></textarea>
  </div>
  <div>
      <input type="submit" value="Descargar" id="btn-submit">
      <input type="reset" value="Limpiar formulario" id="btn-reset">
  </div>
</form>
<a href="#" id="descarga"></a>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.