De acuerdo, para un poco de información, estoy creando un generador de firmas de correo electrónico HTML para un cliente y me he encontrado con un problema varias veces. Creé una función que permite al usuario descargar el archivo como .html para que pueda instalarlo en la plataforma de correo electrónico que elija. El problema con el que me encuentro es que, por alguna razón, cuando uso # en cualquier parte del archivo index.html, parece que el código se detiene allí cuando se descarga. Supongo que el # de alguna manera está interfiriendo con the.innerHTML; haciendo que se detenga por alguna razón.
Adjuntaré mi codepen.io sin tener en cuenta que no hay mucho CSS, ya que acabo de comenzar con esto y quería que la funcionalidad funcionara antes de que la firma se vea bien.
enlace: https://codepen.io/andrewnyrivera/pen/XWaELwL
/* DOWNLOAD! */ function download() { var filename = document.getElementById("filename").value; var a = document.body.appendChild(document.createElement("a")); a.download = filename + ".html"; a.href = "data:text/html," + document.getElementById("content").innerHTML; // Grab the HTML a.click(); // Trigger a click on the element }También aquí hay una imagen de cómo se corta el código, puede ver esto en el elemento de inspección después de descargar el archivo. ingrese la descripción de la imagen aquí
ya me he dado cuenta!!!! ¡Gracias a los que me han ayudado a guiarme! Investigué un poco basándome en lo que me dijeron acerca de que UTF-8 no permite los símbolos # y que el símbolo # fragmenta la URL. Terminé poniendo "document.getElementById("content")" como una variable y luego hice "encodeURIComponent(content)". No estoy 100% seguro de por qué funciona, pero lo descubriré. Supongo que lo codifica donde el # ya no está allí hasta que se decodifica de nuevo a # allí para no fragmentar la URL.
function download() { var filename = document.getElementById("filename").value; var content = document.getElementById("content").innerHTML; var a = document.body.appendChild(document.createElement("a")); a.download = filename + ".html"; a.href = "data:text/html;charset=utf-8," + encodeURIComponent(content); a.click(); // Trigger a click on the element }¡Gracias a los que ayudan!
Mejor,
Andrés