2

Tengo un script en jquery + ajax + php el cual tengo un problema que no se efectivamente sea de compatibilidad o de la manera en que lo estoy empleando pues hace dos peticiones dentro del mismo ajax. Los detalles:

El scrip envía a través de ajax 2 parámetros a php para ser procesados: Una bandera (para saber que función acceder) y un token (con este token sabe que información debe generar el pdf.). En php primero valido si el token que se recibe es válido, Si no existe regreso 1 y si existe regreso 2:

Ajax lo recibe y vuelve a hacer otra petición con otra bandera y el mismo token. php lo procesa y genera el pdf. En este sentido en ajax espero un blob para poder iniciar la descarga del pdf en la misma ventana.

Todo funciona correctamente en google chrome, sin embargo, en mozilla y en Microsoft Edge no quiere funcionar (ya ni se diga en internet explorer).

He revisado la consola de errores de los navegadores y bueno, para ser honesto si hay errores pero ninguno con mi archivo jquery que hace la petición. Me temo que es un problema de compatibilidad.

A continuación comparto mi código:

$('.descargarpdfbtn').click(function(){
        var nombre = $("#dnombre").html();
        var token = $(this).attr('id');
        var datos = new FormData();
        datos.append("getpdfdescargar",true);
        datos.append("token",token);
        $.ajax({
            url:"../../views/ajax.php",
            method:"POST",
            data:datos,
            cache:false,
            contentType: false,
            processData:false,
            beforeSend: function() {
              $("#loading").removeClass('d-none');
            },
            success: function(regreso){
                $("#loading").addClass('d-none');
                //alert(regreso);
                if(regreso==1){
                    alertamensaje(':/','Al parecer ocurrió un problema. Por favor inténtalo nuevamente.');
                }else if(regreso==2){
                    var dato = new FormData();
                    dato.append("getpdfdescargar2",true);
                    dato.append("token",token);
                    $.ajax({
                        url:"../../views/ajax.php",
                        method:"POST",
                        data:dato,
                        cache:false,
                        contentType: false,
                        processData:false,
                        xhrFields: {
                            responseType: 'blob'
                        },
                        beforeSend: function() {
                          $("#loading").removeClass('d-none');
                        },
                        success: function(regresos){
                            $("#loading").addClass('d-none');
                            descargar(regresos, nombre);
                        }
                    });
                }
            }

        });
    });

Las funciones de php que procesan las peticiones son las siguientes:

if(isset($_POST['getpdfdescargar']) && isset($_POST['token'])){
        session_start();
        //Se valida si el identificador es correcto
        $instancia = new usuarioController();
        $resultado = $instancia->validarIDPostulado($_POST['token']);
        if($resultado==false){
            //Error al desencriptar el Token
            echo 1;
        }else{
            //Token válido
            echo 2;
        }
    }

    if(isset($_POST['getpdfdescargar2']) && isset($_POST['token'])){
        session_start();
        //Se valida nuevamente si el identificador es correcto
        $instancia = new usuarioController();
        $resultado = $instancia->validarIDPostulado($_POST['token']);
        if($resultado==false){
            //Error al desencriptar el token
            echo 1;
        }else{
            //Se inicializa la generación del pdf
            $pdf = new pdfcontroller();
            $pdf->generarPdf($resultado);
        }
    }

El jquery inicial tiene una función que recibe el pdf e inicia la descarga. La función se llama "descargar", la cual sospecho que de aquí venga el problema porque testeando las funciones en php, todos los parámetros llegan sin problema y si recibe el blob de regreso, pero no se inicia la descarga. Este es el código:

function descargar(blob, nombre){
        var a = document.createElement('a');
        var url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = 'perfil_'+nombre+'.pdf';
        a.click();
        window.URL.revokeObjectURL(url);
    }

Este asunto me tiene liado y ya he buscado documentarme pero no encuentro nada relacionado. Gracias por echarle un vistazo.

3
  • 1
    Tengo varias preguntas. La primera: ¿necesitas realmente hacer dos llamadas XHR al servidor? La segunda: ¿es indispensable sobrecargar la memoria del navegador con la descarga del archivo? Te explico esto último: si te descargas un PDF de 500 MB el navegador tendrá que mantener en memoria la totalidad del PDF además de la memoria necesaria para el resultado de createObjectURL() (que es mayor que el tamaño del propio PDF). Sin embargo las descargas del navegador requieren mucha menos memoria, apenas un búfer para la descarga en disco de lo que se va recibiendo poco a poco por HTTP. Commented el 11 ene. 2019 a las 9:54
  • Hola @OscarGarcia gracias por responder, te comento: 1.- Hago dos llamadas porque en la primera necesito verificar si el token es válido o no para que la segunda espere un el archivo y sea recibido como blob. Intenté hacerlo de maneras diferentes, pero mis conocimientos limitados me llevaron a esa solución funcional. 2.- Es un requerimiento que al dar clic en un botón se genere y descargue el archivo sin refrescar la página es por esa razón que lo hago de esta manera. Necesitaba adaptar el código a este requerimiento. Commented el 11 ene. 2019 a las 14:28
  • @OscarGarcia como dato adicional te comento que los archivos generados en promedio pesan 90kb. Espero me puedas ayudar. Muy amable. Commented el 11 ene. 2019 a las 14:29

2 respuestas 2

1

Creo que el problema lo tienes en la forma en la que jQuery crea el tipo de dato "blob". Por algún motivo no lo genera bien. Con tiempo investigaré este comportamiento para completar mi respuesta.

Para solucionar tu problema te recomiendo que la función sea la que genere el blob a partir de los datos recibidos (usando este ejemplo como base), sean o no de tipo blob:

function descargar(blob, nombre) {
  var a = document.createElement('a');
  /* Vamos a cargar los datos (siendo o no blob) en una matriz 
    y forzamos la creación de un nuevo blob */
  var url = window.URL.createObjectURL(
    new Blob([ blob ], { type: 'application/octet-stream' })
  );
  a.href = url;
  a.download = 'perfil_' + nombre + '.pdf';
  a.click();
  window.URL.revokeObjectURL(url);
}
4
  • muchas gracias pero sigue sin funcionarme :( , es decir, en la primer línea de la función "descargar" pongo un alert(blob) para saber si recibe bien los datos y aparece esto.prntscr.com/m63tv5, pero sigue sin iniciarlizar la descarga :/ Commented el 12 ene. 2019 a las 2:38
  • ¿Qué navegador estás usando y qué mensajes aparecen en la consola de JavaScript? Commented el 12 ene. 2019 a las 6:20
  • ¿Sería posible acceder a tu entorno de pruebas para poder depurar en funcionamiento tu aplicación (peticiones XHR, cabeceras, contenido de los resultados, etc)? Commented el 14 ene. 2019 a las 9:51
  • Gracias por tu interés, mira despues de batallar encontré que efectivamente era problema de incompatibilidad, esta respuesta me ayudó a solucionar mi problema. Muchas gracias stackoverflow.com/a/41511839/5764180 Commented el 3 feb. 2019 a las 21:12
0

Después de sumergirme bastante en la documentación y a la ayuda de stackoverflow en inglés encontré que mi problema efectivamente era un problema de incompatibilidad. Este asunto fue resuelto en el sitio en inglés:

https://stackoverflow.com/a/41511839/5764180

Para mi código en específico quedó resuelto de esta manera:

function descargar(response, status, xhr, nombre){
        var filename = nombre+'.pdf';                  
        var disposition = xhr.getResponseHeader('Content-Disposition');

        if (disposition) {
            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            var matches = filenameRegex.exec(disposition);
            if (matches !== null && matches[1]) filename = matches[1].replace(/['"]/g, '');
        } 
            var linkelem = document.createElement('a');
            try {
                var blob = new Blob([response], { type: 'application/octet-stream' });                        
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    //   IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
                    window.navigator.msSaveBlob(blob, filename);
                } 
                else{
                    var URL = window.URL || window.webkitURL;
                    var downloadUrl = URL.createObjectURL(blob);
                    if (filename) { 
                        // use HTML5 a[download] attribute to specify filename
                        var a = document.createElement("a");
                        // safari doesn't support this yet
                        if (typeof a.download === 'undefined') {
                            window.location = downloadUrl;
                        } else {
                            a.href = downloadUrl;
                            a.download = filename;
                            document.body.appendChild(a);
                            a.target = "_blank";
                            a.click();
                        }
                    } else{
                        window.location = downloadUrl;
                    }
                }   

            } catch (ex) {
                console.log(ex);
            }
    }

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.