0

Background

I am developing a web application in which an authenticated user may create an event and send out invitations to that event.

One of the requirements is that I add a button, which the event organizer can click to allow him/her to download an excel/OOXML report of all invitations sent.

Architecture

The view and actual button-click event all live in a "Web" project which runs on ASP.NET MVC 4 and is using mostly plain HTML and AngularJs as a platform.

I also have an API project supported by a BLL, DAL, etc. The API is .NET MVC WebAPI and it is the provider of the spreadsheet via this endpoint:

/// <summary>GET api/ExportInvitations/{id}</summary>
/// <summary>Gets an OOXML invitation report by event id.</summary>
public HttpResponseMessage Get(int id)
{
    var wb = Invitation.ConstructInvitationSpreadsheet(id);

    var result = new HttpResponseMessage(HttpStatusCode.OK);
    var stream = new MemoryStream(); 
    wb.SaveAs(stream);
    result.Content = new StreamContent(stream);
    result.Content.Headers.ContentType =
        new MediaTypeHeaderValue("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
    result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") { FileName = "HelloWorld.xlsx" };
    return result;

}

On the front end, I am using this AngularJS scripting to call the API endpoint that constructs and returns the spreadsheet (I have summarized this code for the sake of brevity):

 $http.get('/api/ExportInvitations/' + id).success(function(data) {
                    //do stuff
                });

The Problem

Everything seems to work well up to the point that the user should see the spreadsheet appear in their browser as a download. The ajax call to the API is fine, and the API returns a spreadsheet as it should--I just never see the file appear as a download at the bottom of my browser (I am using Chrome).

Any help is appreciated.

1 Answer 1

3

I found the answer in another SO post shortly after posting this:

You can't download via ajax per se, you just need to reset the location of the window. So, instead of this:

 $http.get('/api/ExportInvitations/' + id).success(function(data) {
                    //do stuff
                });

I just need this:

window.location = '/api/ExportInvitations/' + id;

And this triggers the download without actually changing the URL in the browser.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.