Download pdf file from ajax response

Question

I'm trying to make the browser download a pdf file received from an ajax response.

Inspired by Download pdf file using jquery ajax I simulate a click/download event like this:

    var req = new XMLHttpRequest();
    req.open("POST", "/servicepath/Method?ids=" + ids, true);
    req.responseType = "blob";
    req.onreadystatechange = function () {
        if (req.readyState === 4 && req.status === 200) {
            var blob = req.response;
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = "PdfName-" + new Date().getTime() + ".pdf";
            link.click();
        }
    };
    req.send();

Unfortunately this only works in Chrome, but not Firefox + IE. Nothing happens when I try to trigger it in the last two browsers.

The script and markup is placed inside an iframe due to inheritance from an CMS, but I'm not sure if that has any influence a.

Any idea on how to optimize it for all modern browsers?

check the console in IE, let us know if it is throwing any errors — Vignesh Subramanian, Jul 25 '16 at 04:05

Dekel · Answer 1 · 2016-07-24T22:30:35.197

21

This version will work in all modern browsers:

var req = new XMLHttpRequest();
req.open("POST", "/servicepath/Method?ids=" + ids, true);
req.responseType = "blob";
req.onreadystatechange = function () {
    if (req.readyState === 4 && req.status === 200) {
        var filename = "PdfName-" + new Date().getTime() + ".pdf";
        if (typeof window.chrome !== 'undefined') {
            // Chrome version
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(req.response);
            link.download = "PdfName-" + new Date().getTime() + ".pdf";
            link.click();
        } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
            // IE version
            var blob = new Blob([req.response], { type: 'application/pdf' });
            window.navigator.msSaveBlob(blob, filename);
        } else {
            // Firefox version
            var file = new File([req.response], filename, { type: 'application/force-download' });
            window.open(URL.createObjectURL(file));
        }
    }
};
req.send();

I was trying to get also a version for safari but it didn't work so well. Will try to keep investigate it and give a solution for that too.

edited Jul 24 '16 at 22:30

answered Jul 24 '16 at 14:13

Dekel

60,707
10
101
129

I went with gaetanoM's answer since he was first, but I tested your script afterward and it works as well - thanks (I voted it up) – Jul 25 '16 at 13:48
Actually I was the first :( answered 23 hours ago. – Dekel Jul 25 '16 at 13:49
Argh, s*** I'm sorry :/ He popped out first, so I assumed he was before you.. Do you know if I can add an extra bounty for you? – Jul 26 '16 at 06:51
You can add a bounty to every question and award it to new or existing answers. [You can read more here](http://stackoverflow.com/help/privileges/set-bounties). – Dekel Jul 27 '16 at 09:36
1

Cool, bounty waiting for you in 23 hours :) – Jul 28 '16 at 10:25
From where did you find these browser related downloading material. Is there any proper documentation for this kind of stuff? Please share if there is any useful resource for it because I want to understand this entire code. – Umar Asghar Jul 20 '18 at 07:33

score 16 · Accepted Answer · answered Jul 24 '16 at 21:55

Any idea on how to optimize it for all modern browsers?

Yes, I can give you a solution tested on windows 10 with IE11, Firefox 47 and Chrome 52. Nothing for Microsoft Edge at the moment.

At the beginning you need to distinguish if you are on IE or the other two browsers. This because on IE11 you can use:

window.navigator.msSaveBlob(req.response, "PdfName-" + new Date().getTime() + ".pdf");

For the other two browsers your code works on Chrome but not on Firefox because you did not append the element to the document body.

So the corrected code is:

var req = new XMLHttpRequest();
req.open("POST", "/servicepath/Method?ids=" + ids, true);
req.responseType = "blob";
req.onreadystatechange = function () {
  if (req.readyState === 4 && req.status === 200) {

    // test for IE

    if (typeof window.navigator.msSaveBlob === 'function') {
      window.navigator.msSaveBlob(req.response, "PdfName-" + new Date().getTime() + ".pdf");
    } else {
      var blob = req.response;
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = "PdfName-" + new Date().getTime() + ".pdf";

      // append the link to the document body

      document.body.appendChild(link);

      link.click();
    }
  }
};
req.send();

@AndiAR I don't know. I never used safari. Could you be so kind to test it and let me know? Thanks so much — gaetanoM, Sep 25 '18 at 13:40

score 0 · Answer 3 · answered Sep 22 '20 at 13:28

very simple approach for download file...

 $.ajax({
        url:"{{url('.......')}}/"+customerOrderId,
        type:'post',
        data:{"_token":"{{csrf_token()}}"},
        success:function(e){
            console.log(e.file);
            var link = document.createElement('a');
            link.href = e.file;
            link.download = "invoice_"+customerOrderId+"_" + new Date() + ".pdf";
            link.click();
            link.remove()

        },
        error:function(e){
            alert('Something went wrong!');
        }
    });

Download pdf file from ajax response

3 Answers3

Linked