0

Tengo un problema con la descarga de mi QR. En navegadores de escritorio, funciona perfectamente en cambio en navegadores de android o iOS no funciona. Adjunto código JS

document.getElementById("download")
  .addEventListener( 'click', (e) => {
    e.preventDefault();
    var source = document.getElementById("contenedorQR")
      .children[1].src;
    e.preventDefault();
    var source = document.getElementById("contenedorQR")
      .children[1].src;

    // Verificar que el src realmente apunta a una imagen

    if (
      source.startsWith("data:image")
      || /\.(jpg|jpeg|png|gif)$/.test(source)
    ) {
      fetch(source)
      .then(res => res.blob())
      .then(blob => {
        // Crear un enlace de descarga
        var a = document.createElement('a');
        var url = window.URL.createObjectURL(blob);
        a.href = url;

        // Forzar la extensión correcta
        var extension = blob.type.split('/')[1];
        let nombreArchivo = prompt("Ingrese el nombre del archivo a guardar")
        if( nombreArchivo.length == 0 ){
          nombreArchivo = "QR"
        }
        var filename = nombreArchivo + '.' + extension;
        a.download = filename;
        // Nombre del archivo con la extensión correcta
        document.body.appendChild(a);
        a.click();

        // Limpiar
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
      })
      .catch(
        err => console.error('Error al descargar la imagen: ', err)
      );
    } else {
      console.error('El source no apunta a una imagen válida.');
    }
});

Lo que deseo hacer con este codigo es: Generar un QR (Se genera perfecto) y descargarlo como .png. Repito, en escritorio funciona perfectamente, en cambio en android me da como que el atributo SRC está vacío y no descarga nada.

Gracias!

EDIT IMG 1 (ANDROID) introducir la descripción de la imagen aquí

IMG 2 (ESCRITORIO) introducir la descripción de la imagen aquí

4
  • Si es método te da problemas prueba con window.location.assign(url) en lugar del href
    – Mateo
    Commented el 5 sept. a las 14:59
  • Hola Mateo. Gracias por la respuesta, probé pero aún así sigue sin funcionar. Commented el 5 sept. a las 16:38
  • Probé tu código y me funciona bien incluso con la línea e.preventDefault(); duplicada. Si no podemos reproducir el problema no podemos ayudarte
    – Mateo
    Commented el 5 sept. a las 17:16
  • El codigo funciona perfecto desde el navegador de una computadora de escritorio, o con el móvil configurando con "sitio de escritorio", no funciona desde Android o desde el navegador del móvil. Tengo el código en una web de github, intento desde el celular y no hace nada Commented el 5 sept. a las 17:38

1 respuesta 1

0

De acuerdo a lo que comentas:

en escritorio funciona perfectamente, en cambio en android me da como que el atributo SRC está vacío y no descarga nada

En realidad no es que el valor de src se encuentre vacio, lo que sucede es que en una aplicación a diferencia del navegador, las urls que definas debe ser definidas como absolutas, ya que si las defines relativas , tratara de buscar los recursos dentro del dispositivo y no los encontraría.

1
  • El problema que encontré, es que al generar el qr desde la libreria QRCode desde el celular, se crea el QR pero no se modifica el atributo "SRC" (Pego imágen en el post), en cambio en el escritorio si se genera (imagen 2) Commented el 5 sept. a las 22:02

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.