javascript - type - Descargue el archivo pdf usando jquery ajax

enviar formulario por ajax javascript

Question

Quiero descargar un archivo pdf para la respuesta de jquery ajax. La respuesta de Ajax contiene datos del archivo pdf. Probé esta solution . Mi código se proporciona a continuación, pero siempre recibo un pdf en blanco.

$(document).on(''click'', ''.download-ss-btn'', function () {

    $.ajax({
        type: "POST",
        url: ''http://127.0.0.1:8080/utils/json/pdfGen'',
        data: {
            data: JSON.stringify(jsonData)
        }

    }).done(function (data) {
        var blob = new Blob([data]);
        var link = document.createElement(''a'');
        link.href = window.URL.createObjectURL(blob);
        link.download = "Sample.pdf";
        link.click();
    });


});

Answer 1

Soy novato y la mayor parte del código proviene de la búsqueda de Google. Obtuve mi descarga de PDF con el siguiente código (prueba y error de reproducción). Gracias por los consejos de código (xhrFields) anteriores.

$.ajax({
            cache: false,
            type: ''POST'',
            url: ''yourURL''
            contentType: false,
            processData: false,
            data: yourdata,
             //xhrFields is what did the trick to read the blob to pdf
            xhrFields: {
                responseType: ''blob''
            },
            success: function (response, status, xhr) {

                var filename = "";                   
                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);
                } 
            }
        });

Answer 2

jQuery tiene algunos problemas al cargar datos binarios utilizando solicitudes AJAX, ya que aún no implementa algunas capacidades HTML5 XHR v2, consulte esta solicitud de mejora y esta discussion

Dado eso, tiene una de dos soluciones:

Primera solución, abandone JQuery y use XMLHTTPRequest

Vaya con el HTMLHTTPRequest nativo, aquí está el código para hacer lo que necesita

  var req = new XMLHttpRequest();
  req.open("GET", "/file.pdf", true);
  req.responseType = "blob";

  req.onload = function (event) {
    var blob = req.response;
    console.log(blob.size);
    var link=document.createElement(''a'');
    link.href=window.URL.createObjectURL(blob);
    link.download="Dossier_" + new Date() + ".pdf";
    link.click();
  };

  req.send();

Segunda solución, use el complemento jquery-ajax-native

El complemento se puede encontrar here y se puede usar para las capacidades XHR V2 que faltan en JQuery, aquí hay un código de muestra sobre cómo usarlo

$.ajax({
  dataType: ''native'',
  url: "/file.pdf",
  xhrFields: {
    responseType: ''blob''
  },
  success: function(blob){
    console.log(blob.size);
      var link=document.createElement(''a'');
      link.href=window.URL.createObjectURL(blob);
      link.download="Dossier_" + new Date() + ".pdf";
      link.click();
  }
});