I have an ajax call that successfully calls a page that by itself works fine. You click the button, and a PDF downloads. However, when I make an AJAX call using the same request type and url, the data is returned, but does not prompt a download.

My call :

    $("#download-pdf").live('click', function(){
      $.ajax({
        url: $(this).parents('form').attr('action'),
        type: 'POST',
        success: function(data){
          console.log(data);
        }
      });
      return false;
    });

Data is returned as what would be an unparsed PDF. So I know the information is there. It just doesn't cause a download. Any tricks?

I have an ajax call that successfully calls a page that by itself works fine. You click the button, and a PDF downloads. However, when I make an AJAX call using the same request type and url, the data is returned, but does not prompt a download.

My call :

    $("#download-pdf").live('click', function(){
      $.ajax({
        url: $(this).parents('form').attr('action'),
        type: 'POST',
        success: function(data){
          console.log(data);
        }
      });
      return false;
    });

Data is returned as what would be an unparsed PDF. So I know the information is there. It just doesn't cause a download. Any tricks?

• javascript
• jquery

• If you're using a form, why don't you just submit it ? $('myform').submit(); – sp00m Commented Apr 17, 2012 at 12:56
• 1 Moreover, $.ajax using post can be replaced by $.post (cf. here) – sp00m Commented Apr 17, 2012 at 12:58
• Kind of a moot point because this is entirely the wrong approach to the problem, but: Why are you using a POST request when you're not actually posting any data? Also, .live() is deprecated - you should consider using .on() (jQuery 1.7+) or .delegate() (prior to 1.7), depending on your version of jQuery. – Anthony Grist Commented Apr 17, 2012 at 12:59
• @sp00m For such a trivial POST request, that's true. However, there's no functional difference between the two - $.post() is just a wrapper for a call to $.ajax(). – Anthony Grist Commented Apr 17, 2012 at 13:02
• 1 @sp00m Given that I'm familiar with both syntaxes, I don't find one easier to read than the other. For those unfamiliar with jQuery, I also think that $.ajax() makes it much clearer that it is, indeed, an AJAX call. Not to mention that I prefer to always use $.ajax() because it's much easier to change if I need to add more options to that specific call. – Anthony Grist Commented Apr 17, 2012 at 13:18

2 Answers 2

The only way to force a download is to refresh the page using the "standard" form submission method. With Ajax you'll receive the raw output data (PDF) and no save dialog will ever pop up

It's not possible to force downloading when using AJAX.

Please read this: Force download a pdf link using javascript/ajax/jquery

If you would just submit the form then you can tell the browser to download the file by sending the appropriate headers:

Response.Clear();
Response.AddHeader("content-disposition", "attachment;filename=file.pdf");

Response.ContentType = "application/pdf";
Response.WriteFile(Server.MapPath(@"~/file.pdf"));

Response.End();