1

I have a Bootstrap application that shows a list of data. I have a button at the bottom of the page that, when clicked, creates an Excel file and sends it back to the client.

The link (button) the user clicks to start the process is as follows:

<li><a href ="javascript:ExportToExcel();" class="btn btn-info btn-sm">Export list to Excel</a></li>

The JavaScript function that gets called looks like this:

function ExportToExcel() {
        var Url = "/UserLocation/ExportToExcel";

        $.get(Url);
     }

I know this probably isn't right, but it does correctly call my C# function that creates the Excel spreadsheet.

My C# function looks like this:

public ActionResult ExportToExcel()
{
    var locationList = this.UserLocationData.GetList(this.AccountRowId).AsEnumerable();
    ExcelPackage package = Common.Excel.CreateExcelFile(locationList);


    var cd = new System.Net.Mime.ContentDisposition
    {
        // for example foo.bak
        FileName = "ExcelTest.xlsx",

        // Always prompt the user for downloading, set to true if you want the browser to try to show the file inline
        Inline = false, 
    };

    Response.AppendHeader("Content-Disposition", cd.ToString());
    return File(package.GetAsByteArray(), "application/force-download");
}

At the moment, when the user clicks the button, my C# function is called, but nothing is returned to the client. I suspect my JS function is not correct, but I don't really know what to do to make it correct. I also don't know what MIME type to use in my C# method (the last line in my C# method). Is there a better way to do all this? I am fairly new to JavaScript.

Randy Minder
  • 47,200
  • 49
  • 204
  • 358
  • 1
    `$.get()` isn't supposed to start downloading for a client. It just requests some data that you can process in your script. – zerkms May 01 '14 at 00:40
  • Yeah, I was pretty sure I didn't have that right. I just don't have enough experience to know what to use. – Randy Minder May 01 '14 at 01:00

1 Answers1

5

With $.get() you're getting the data through ajax. The browser will get the file content in the ajax response, but there is no way to offer the user to save this data as a file. (Well, technically is possible in most browsers, but not in all of them, although some more are supported with this js. But obviously it's overkill for this case. Thanks to zerkms for his comment).

The solution is much simpler, use the old good window.open(url), so the file is opened in a new browser window, and the user will be invited to open or save it (that depends on the browser configuration).

Or use directly a link like this:

<li><a href ="/UserLocation/ExportToExcel" class="btn btn-info btn-sm">
    Export list to Excel</a></li>

(unless your js function does some extra processing).

JotaBe
  • 38,030
  • 8
  • 98
  • 117
  • Unless the javascript does something special, you can also just use a link. i.e. `` – Rowan Freeman May 01 '14 at 00:53
  • "And you can't do anything with the data received by ajax." --- this phrase is reeeeeeeeeeeeeally strange – zerkms May 01 '14 at 00:56
  • I guess JotaBe means that you can't download the data (file) to your machine once you've received it via javascript. – Rowan Freeman May 01 '14 at 01:00
  • Good point. English is not my mother language, and I try to do my best... and this time my best was really ugly. I hope it's now more clear. – JotaBe May 01 '14 at 01:00
  • @Rowan Freeman: technically - you *can* http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download :-) – zerkms May 01 '14 at 01:01
  • 1
    @zerkms While I love the `download` attribute, that's not exactly an example of "once you've received it via javascript" like Rowan Freeman said – Ian May 01 '14 at 01:05
  • @Ian: once you've received it - you can serve it as a blob through `download` attribute. I don't see how it's not exactly the same example. – zerkms May 01 '14 at 01:12
  • Wow! HTML5 is always surprising. And I can see it's supported by many browsers: http://caniuse.com/download As always IE and Safari are the black sheep. So, use it with caution! – JotaBe May 01 '14 at 01:14
  • @zerkms I didn't exactly think of it that way. The OP was using AJAX, and the example with the `download` attribute was with a simple ``. When I look at MDNs explanation of the attribute, I see that the attribute works with `blob:` and `data:` URLs, so that definitely seems possible. Can you explain how to create a blob URL from an ajax response? I found http://stackoverflow.com/questions/934012/get-image-data-in-javascript for `data:` URLs so that would work, but where do blobs fit in? – Ian May 01 '14 at 01:22
  • @zerkms Ahh I see, makes sense. I don't know why I thought it was so complicated, I guess I was overthinking how blobs were handled – Ian May 01 '14 at 01:28