How do I offer an Ajax POST response to the user as a download?

Question

I'm trying to include a vCard export function in an existing page full of account information.

The ugly methods would involve 1, submitting a form to the same page, processing it and re-rendering the whole page, or 2, a GET targeting an iframe on the page. I'd really like to avoid both of those, but I may have to use #2 to achieve the goal.

Right now I have:

<input type="image" src="/intra/imgs/icons/vcard.png" onclick="$.post('/intra/vcard.php', { id: '992772', type: 'sponsor'});">

Which works in the sense that if I watch XHR activity in Firebug I see the request come back with the correct response, full of vCard formatted data. However it does not prompt the user to download the response as a file, even though the card is sent with:

header('Content-Type: text/x-vcard');
header("Content-Disposition: attachment; filename={$this->name_first}{$this->name_last}.vcf");

Am I doing something wrong, or is this just not possible?

Answer 1

Yeah, you can't trigger a download from xhr. Only way I've found is option #2, use an iframe.

Perhaps a jquery plugin (I'm assuming you're using jquery) is an overkill for just this purpose, but this may be of use to you.

Answer 2

I'm confused as to what exactly the problem is. Why not just do something like:

<input type="image"
       src="/intra/imgs/icons/vcard.png"
       onclick="window.location='/intra/vcard.php?id=992772&type=sponsor';">

And then return the appropriate download headers on vcard.php? When the browser gets those, it will stay on the same page and prompt for download. You will have to change your code to handle the variables as $_GET instead of $_POST but you should be using GET for this anyways.

EDIT as pointed out in the comments, it would be even more appropriate to do this:

<a href="/intra/vcard.php?id=992772&type=sponsor"><img src="/intra/imgs/icons/vcard.png"></a>

As then it would be accessible to users with javascript disabled.

Answer 3

check if the filename ´{$this->name_first}{$this->name_last}.vcf´) is valid and the http-response in firebug! (tab network, click on the response).

is the content there and correct?
is the content-length correct? what about the http-status?

Answer 4

Generate you content during post, then redirect to that content.