JQuery to post to a download file

Question

Hi I have the majority of the code for this but am missing a "pop in" of the file and so I am looking for help.

The functionality is this: the user fills in a report form, the report gets shown to screen, the user has a button with a final option to click it to download the report in xls and save it locally.

I have added xls as a php so that I can <table><tr><td></td><tr></table> a spreadsheet back

AddType application/x-httpd-php .xls

this is rather dangerous in many instances but in my case it was essential (the "spreadsheets" were too big in memory to be sent any other way than as HTML pseudo) so even though this gives the user a "are you sure" in excel it was by far and away the least bad option.

Ok so digressions aside, I want the jQuery button to post the data to a response.xls and then "download" the file as if it were a link, this is actually harder than I thought. The other option is to get string the whole thing but that is too inelegant for me.

Here is what I have so far.

<button id="download">Download As Excel</button>
<script type="text/javascript">
    $(document).ready(function () { 
        $('#download').button(); 
        $('#download').click(function(){ 
            $.post("response.xls", 
            $("form#sendform").serialize(), 
                function(data){ 
                    alert(data); 
                    var win=window.open('about:blank'); 
                    with(win.document) { 
                      open(); 
                      write(data); 
                      close(); 
                    } 
                } 
            ); 
            return false; 
        }); 
    }); 
</script>

the critical part is that this works by re-serialising the pre-existing options the user has already picked. It works: But it opens the file as "html" in a popup window - this is wrong I need it to download it as if it were a link.

Any ideas would be most welcome. note that I use this trick a lot but it's always been a static xls file that has no params (litterally a case of <a href=\"report.xls\">Main Report</a>) - so this is markedly different

http://stackoverflow.com/questions/1207190/embedding-base64-images samething more or less — OneOfOne, Sep 18 '13 at 11:58
@OneOFOne thanks I had a look, I am not sure that it is the same thing :-/ that link is regarding "inline" (non-url) sourced "objects" graphical or otherwise it's not the same thing — user26676, Sep 18 '13 at 12:00
You basicly do the same thing with your response.xls, data, and when the user clicks the link it will either download or open in the browser if they have the plugin or whatever — OneOfOne, Sep 18 '13 at 12:27

score 1 · Answer 1 · answered Sep 20 '13 at 15:28

this code below will work, you cannot utilise $.post in the way outlined above you have to do it "the old way" by fake-making a fake html form and submitting it

    $('#download').click(function(){ 
            var form = document.createElement("form");
            form.setAttribute("method", "post");
            form.setAttribute("action", "response.xls");
            form.setAttribute("target", "_blank");
            $('form#sendform *').filter(':input').each(function(){
                if (typeof $(this).attr('name') != "undefined"){
                    var hiddenField = document.createElement("input");
                    hiddenField.setAttribute("name", $(this).attr('name'));
                    hiddenField.setAttribute("value", $(this).val());
                    form.appendChild(hiddenField);                      
                }
            });
            form.style.visibility="hidden";
            document.body.appendChild(form);
            form.submit();

        return false; 
    });

score 0 · Answer 2 · answered Sep 18 '13 at 12:32

You could try this, remember to base64 the data on your server :

<button id="download">Download As Excel</button>
<script type="text/javascript">
$(function () { 
    var btn = $('#download');
    btn.click(function(){ 
        btn.prop('disabled', true);
        $.post("response.xls", $("form#sendform").serialize(), 
            function(data){ 
                //data === base64'ified xsl
                location.href = 'data:application/vnd.ms-excel;base64,' + data;
            } 
        ); 
        return false; 
    }); 
}); 
</script>

how is that different to loading the get string? I am sorry I think you've totally misunderstood this thanks for your time though, what I am after is a target="_new" post form equivalent — user26676, Sep 20 '13 at 11:26

JQuery to post to a download file

2 Answers2