Загрузка содержимого запроса jQuery Ajax пуста

Question

У меня есть PHP-файл, который возвращает выходные данные в формате PDF. Работает нормально, если я обращаюсь к файлу напрямую.

Я хочу получить PDF-файл через AJAX.

В нативном Javascript, работает нормально:

  var req = new XMLHttpRequest();
  req.open("POST", "./api/pdftest.php?wpid="+wpid, true);
  req.responseType = "blob";
  req.onreadystatechange = function ()
   {
    if (req.readyState === 4 && req.status === 200)
     {
      var blob=req.response;
      var filename = "test.pdf";
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = "test.pdf";
      link.click();
      var file = new File([blob], filename, { type: 'application/force-download' });
      window.open(URL.createObjectURL(file));
     }
   };
  req.send();

Но я думаю, я бы использовал jQuery для обеспечения кросс-браузерной совместимости (хотя приведенный выше фрагмент работает в Edge, Chrome и Firefox на ПК, я не тестировал его вдругие браузеры / на других платформах)

Поэтому я попытался переписать функцию:

  url='./api/pdftest.php?wpid='+wpid;
  $.ajax(
   {
    url: url,
    method: 'POST',
    responseType: 'blob',
    success: function(data)
     {
      var filename='test.pdf';
      var blob=new Blob([data]);
      var filename = "test.pdf";
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = "test.pdf";
      link.click();
      var file = new File([blob], filename, { type: 'application/force-download' });
      window.open(URL.createObjectURL(file));
     }
   });

Эквивалент jQuery позволяет мне загрузить файл PDF, но ... файл PDF пуст.

Так что я думаю, что я делаю что-то не так, вероятно, в преобразовании данных в BLOB.Но что?Я надеюсь, что кто-то может понять, что я делаю неправильно.

Я использовал возрасты в StackOverflow, прочитал много предложений - но не нашел никакого ответа.Я просто не вижу леса за деревьями.

Answer 1

Поскольку двоичные данные невозможно получить через jQuery.ajax, Native является единственным способом, по крайней мере, на данный момент.Следующий метод работает в Edge, Firefox, Chrome и Opera - протестирован в Windows 10.

    var req = new XMLHttpRequest();
    req.open("POST", "./api/pdftest.php?wpid="+wpid, true);
    req.responseType = "blob";
    req.onreadystatechange = function ()
     {
      if (req.readyState === 4 && req.status === 200)
       {
        var blob=req.response;
        var filename = "test.pdf";
        var link = document.createElement('a');
        link.setAttribute("type", "hidden"); // make it hidden if needed
        link.href = window.URL.createObjectURL(blob);
        link.download = "test.pdf";
        document.body.appendChild(link);
        link.click();
        link.remove();
        var file = new File([blob], filename, { type: 'application/force-download' });
        //window.open(URL.createObjectURL(file));
       }
     };
    req.send();

Answer 2

Вероятно, дважды!

Это решение, которое я нашел благодаря Хишаму на Загрузите файл PDF с помощью jquery ajax :

Сначала добавьте следующий плагин, который может бытьиспользуется для возможностей XHR V2, отсутствующих в JQuery: https://github.com/acigna/jquery-ajax-native

Тогда:

   url='./api/pdftest.php?wpid='+wpid;
   $.ajax(
    {
     dataType: 'native',
     url: url,
     xhrFields:
      {
       responseType: 'blob'
      },
     success: function(blob)
      {
       var filename = "test.pdf";
       var link = document.createElement('a');
       link.href = window.URL.createObjectURL(blob);
       link.download = "test.pdf";
       link.click();
       var file = new File([blob], filename, { type: 'application/force-download' });
       window.open(URL.createObjectURL(file));
      }
    });

Кажется, это работает.Примечание: window.open () позволяет делать загрузку в Firefox, метод link.click () работает в Edge, Chrome и Opera

Благодаря miken32 за указание в правильном направлении.

Answer 3

Глядя на документацию для функции jQuery.ajax(), мы видим, что нет параметра с именем responseType, поэтому вам нужно использовать xhrFields для прямой установки свойства объекта XHR.И так как вы только устанавливаете URL и обратный вызов успеха, мы можем просто использовать более короткую функцию jquery.post().

Таким образом, данные возвращаются, мы делаем Blob, а затем URL, чтобы загрузить его.Я не на Windows, поэтому я не могу проверить, будет ли эта ссылка, которую я построил, работать как положено, но решил, что я сделаю это способом jQuery.

var url = './api/pdftest.php?wpid=' + wpid;
$.post({
    url: url,
    xhrFields: {responseType: "blob"},
    success: function(data) {
        // don't set the MIME type to pdf or it will display
        var blob = new Blob([data], {type: "application/octet-stream"});
        // build a blob URL
        var bloburl = window.URL.createObjectURL(blob);
        // trigger download for edge
        var link = $("<a>").attr({href: bloburl, download: "test.pdf"}).click();
        // trigger download for other browsers
        window.open(bloburl);
    }
});