hola, estoy creando una página web simple que requiere descargar un archivo de imagen de salida en el último paso ... pero no sé cómo puedo agregar el botón de descarga dinámicamente en el momento correcto, porque al comienzo de una página no hay necesidad del botón de descarga..
así que tengo el archivo main.js: que se parece a esto:
let img_code=document.getElementById('img_code'); let textbox=document.getElementById('textbox'); let gen_button_img=document.getElementById("img_button"); gen_button_qr.addEventListener("click",()=> { var trailer=textbox.value; var url='www.example.com'; var result= url.concat(trailer); if (navigator.onLine) { if(trailer.length<=1725 && trailer.length>0) { if((trailer !="0")&& (trailer.replace(/\s/g, '').length)) { image_code.src=result; alert("Image Generated successfully"); /**/ } else { alert("You cannot create this file spaces only or only with single 0"); } } else { alert("Maximum charecter limit is exceeded!! "); } } else { alert("No Internet Connection"); } });Entonces, tengo la pregunta: ¿hay alguna forma de agregar dinámicamente el botón que toma la URL del archivo como entrada y descargar ese archivo a través del descargador del navegador web?
Nota => Puedo guardar fácilmente el resultado haciendo clic derecho en la imagen y guardar la opción de imagen; pero quiero agregar un botón adicional para descargar el mismo archivo.
// arrow function to create and append download button into any element // it only takes url of file that will download. const createBtn = (URL) => { // create button element const downloadBtn = document.createElement("button"); // you can set any name of id according to your choice downloadBtn.setAttribute("id", "downloadBtn"); // create anchor element const downloadLink = document.createElement("a"); // set any thing in inner text downloadBtn.innerText = "Download Image"; // set download attribute to true downloadLink.setAttribute("download", true); // set url with URL downloadLink.setAttribute("href", URL); // append button element into anchor element downloadLink.appendChild(downloadBtn); // get that element in which download button will append const container = document.getElementById("container"); // append download button into any element of your choice container.appendChild(downloadLink); }; // url of file const URL = "https://images.pexels.com/photos/863963/pexels-photo-863963.jpeg?cs=srgb&dl=pexels-blaque-x-863963.jpg&fm=jpg" // call createBtn function with URL createBtn(URL); <!-- The element in which download button will be appended --> <div class="container" id="container"></div>¡No estoy 100% seguro de que esto funcione! Tampoco funciona en el fragmento de pila debido a la etiqueta iframe. Trate de usarlo localmente.