CODEWITHSUNDEEP
jquerydownloadhttp-postspreadsheet
user26676
user26676

Reputation: 278

JQuery to post to a download file

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

Upvotes: 0

Views: 2974

Answers (2)

user26676
user26676

Reputation: 278

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; 
    });

Upvotes: 1

OneOfOne
OneOfOne

Reputation: 99351

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>

Upvotes: 0

Related Questions