web-dev-qa-db-fra.com

Téléchargez le fichier pdf en utilisant jquery ajax

Je souhaite télécharger un fichier pdf pour la réponse jquery ajax. La réponse Ajax contient les données du fichier pdf. J'ai essayé ceci solution . Mon code est donné ci-dessous mais je reçois toujours un pdf vierge.

$(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();
    });


});
javascriptjqueryajaxpdf
31
azhar

jQuery rencontre quelques problèmes lors du chargement de données binaires à l’aide des requêtes AJAX, car elle n’implémente pas encore certaines fonctionnalités de HTML5 XHR v2. Voir this demande d’amélioration et this discussion

Dans ce cas, vous avez l'une des deux solutions suivantes:

Première solution, abandonnez JQuery et utilisez XMLHTTPRequest

Allez avec le HTMLHTTPRequest natif, voici le code pour faire ce dont vous avez besoin

  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();

Deuxième solution, utilisez le plugin jquery-ajax-native

Le plugin peut être trouvé ici et peut être utilisé pour les capacités XHR V2 manquantes dans JQuery, voici un exemple de code comment l'utiliser

$.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();
  }
});
65
Hisham

Je suis débutant et la plupart du code provient de Google Search. Mon téléchargement de pdf fonctionne avec le code ci-dessous (essai et erreur). Merci pour les astuces de code (xhrFields) ci-dessus.

$.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);
                } 
            }
        });
16
anonymous