Загрузить pdf-файл с помощью jquery ajax

Question

Я хочу загрузить pdf-файл для jQuery ajax response. Ответ Ajax содержит данные в формате pdf. Я пробовал это solution. Мой код приведен ниже, но я всегда получаю пустой pdf.

$(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

JQuery имеет некоторые проблемы с загрузкой двоичных данных с помощью AJAX запросов, поскольку пока не реализуют некоторые HTML5 XHR v2 возможности, увидеть эту enhancement request и это discussion

Учитывая, что у вас есть один из двух решений:

Первое решение, отказаться от JQuery и использовать XMLHttpRequest

Go с родной HTMLHTTPRequest, вот код, чтобы сделать то, что вы нужно

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

Второе решение, использовать JQuery-Аякса родной плагин

плагин можно найти here и может быть использован для возможности XHR V2, отсутствующих в JQuery, вот пример кода, как чтобы использовать его

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

Answer 2

Я новичок, и большая часть кода взята из поиска в Google. Я получил свою загрузку в формате pdf, используя приведенный ниже код (пробная версия и ошибка). Благодарим вас за советы по коду (xhrFields) выше.

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