PDF file download through XHR Request

Problem

Is it totally impossible to download a pdf file through an XHR request? I know there are many other discussions already on this topic but sadly, I am still not satisfied with them. I am using AngularJs and making a request by using its $Http method. It is not returning any file download popup. But if I hit with the same URL in a new Browser Window then I am getting a popup. I have already tried a work-arround and its working fine i.e. document.location.href = url; but If I do this then I am unable to show the waiting image till the time the download popup is ready and appeared. So the work arround is not enough for me. I would like to do it with a genuine way through a request to the server through which I can handle the alternative flows of the outcome as well.

Problem courtesy of: Ch Faizan Mustansar

Solution

Have a look at this JQuery plugin jquery-file-download-plugin and here is the demo page of this plugin demo . I think its inserting iframe dynamically to DOM and produces look and feel just like AJAX request. It might be helpful for you.

Solution courtesy of: muneebShabbir

Discussion

It certainly depends on the size of the PDF file, but this would be a workable approach if the PDF isn't too large:

  1. Show the "waiting image" and download the PDF using $http.

    $http.get('http://my.example.com/foo.pdf').success(function(pdfData) {
      ... do something with pdfData ...
    });
    
  2. Convert pdfData to Base64 encoding and use a data URI scheme to create a URL for the downloaded PDF file.

  3. Redirect to that URL.
Discussion courtesy of: Moritz Petersen

This recipe can be found in it's original form on Stack Over Flow.