Wsrtjtyk

I have a PHP file that returns output in PDF - Works fine if I access the file directly.

I'd like to retrieve the PDF file through AJAX.

In native Javascript, it works fine:

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

But I guess I'd use jQuery to ensure cross browser compatibility (although the snippet above works in Edge, Chrome and Firefox on pc, I haven't tested it in other browsers/on other platforms)

So I tried to rewrite the function:

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

     }

   });

The jQuery equivalent allows me to download a PDF file but … the PDF file is empty.

So I guess I am doing something wrong, probably in the DATA to BLOB conversion. But what? I hope somebody can see what I am doing wrong.

I've been using ages on StackOverflow, read many suggestions - but didn't find any answer. I simply can't see the forest for the trees.

As binary data is not possible to retrieve through jQuery.ajax, Native is the only way, at least for now. The following method works in Edge, Firefox, Chrome and Opera - tested on 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();

Looking at the documentation for the jQuery.ajax() function, we see there's no setting called responseType, so you need to use xhrFields to directly set a property of the XHR object. And, since you're only setting the URL and success callback, we can just use the shorter jquery.post() function.

So the data is returned, we make a Blob and then a URL to download it. I'm not on Windows so I can't test if that link I constructed will work as expected, but figured I'd do it the jQuery way.

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

    }

});

Probably double!

This is the solution I found thanks to Hisham at Download pdf file using jquery ajax:

First, add the following plugin that can be used to the XHR V2 capabilities missing in JQuery: https://github.com/acigna/jquery-ajax-native

Then:

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

      }

    });

This seems to be working.
Note: the window.open() is to make download possible in Firefox, the link.click() method Works in Edge, Chrome and Opera

Thanks to miken32 for pointing into the right direction.