Download file via button and javascript

Question

I have an action that returns (downloads) an excel file in the following manner:

 public IActionResult CreateExcelFile(string id, int xx, string start, string end) {

//Some additional code...
// ....
// ....
        var file = File(doc, "application/vnd.ms-excel");
        file.FileDownloadName = filename + " " + id + ".xlsx";
        return file;
}

So far, I have triggered this action from a view like this:

<div id="myDiv">Some Content</div>

And lastly the JavaScript:

$(function excelFunction() {

  $('#myDiv').click(function () {

    alert("Initiate excel export")
    var start = $('#startDateTextBox').val();
    var end = $('#endDateTextBox').val();

    $.ajax({
        type: 'GET',
        url: '/Customer/CreateExcelFile',
        data: { id: 'FVM10000', xx: '4', start: start, end: end },
        success: function (response) {
            if (response.type == "success") {
                alert("success")
            }
            else {
                // Do something else
                alert("failure")
            }
        }
    });
  });
});

I enter the debugging mode and see that the action is indeed called with the correct parameters, however, after the action is executed, no file is returned (or downloaded). I get an alert message saying "failure", which indicates that the response was not completed.

Any ideas what I am doing wrong?

Don't need to use AJAX call for a file request. Just open a new window to '/Customer/CreateExcelFile' sending the needed params. The browser will download the file or ask for it. — Jordi Flores, Sep 18 '17 at 14:34
Possible duplicate of [Handle file download from ajax post](https://stackoverflow.com/questions/16086162/handle-file-download-from-ajax-post) — Peter B, Sep 18 '17 at 14:47

Shyju · Accepted Answer · 2017-09-18T14:41:21.080

3

Do not use ajax for file downloads. Do the normal HTTP request to your action method.

$('#myDiv').click(function () {

    var start = $('#startDateTextBox').val();
    var end = $('#endDateTextBox').val();
    var url='/Customer/CreateExcelFile?id=FVM10000&xx=4&start='+start+'&end='+end;
    window.location.href=url;
});

I would also recommend using the html helper method to generate the correct relative path to the base portion of your action method. you can execute the Url.Action helper method and store the result of this call in an html 5 data attribute in your div.

<div id="myDiv" data-url="@Url.Action("CreateExcelFile","Customer")">Some Content</div>

Now in the script read this value and do the querystring concatenation.

$('#myDiv').click(function () {

    alert("Initiate excel export")
    var start = $('#startDateTextBox').val();
    var end = $('#endDateTextBox').val();
    var url=$(this).data("url")+"?id=FVM10000&xx=4&start="+start+"&end="+end;
    window.location.href=url;
});

edited Sep 18 '17 at 14:41

answered Sep 18 '17 at 14:32

Shyju

214,206
104
411
497

This seems to work! Thank you. How would I introduce a parameter to this javascript? Within the view I have a model property that I want to pass along to the JS. – jazy Sep 18 '17 at 14:43
If that parameter exist in your CreateExcelFile action method, you can add that to the method call.(Ex :`@Url.Action("CreateExcelFile","Customer",new { name=Model.FirstName})`. Now since the url already has a `?`, you should do `&` as the first one to start instead of `?` when you concatenate querystring params in your js code – Shyju Sep 18 '17 at 14:45
1

You´re absolutely right. It works! Thank you so much!! @Shyju – jazy Sep 18 '17 at 14:53

Download file via button and javascript

1 Answers1