Is there a way to Post an array to web api or mvc controller and get a file back to download as a result?

Question

I use an html table where it's content can be changed with mouse drag and drop implemented. Technically, you can move the data from any table cell to another. The table size 50 row * 10 column with each cell given a unique identifier. I want to export it to .xlsx format with C# EPPlus library, and give back the exported file to client.

So I need the pass the whole table data upon a button press and post it to either a web api or an mvc controller, create an excel file (like the original html table data) and send it back to download with browser.

So the idea is to create an array which contains each of table cell's value ( of course there should be empty cells in that array), and post that array to controller.

The problem with that approach lies in the download, if I call the api or mvc controller with regular jquery's ajax.post it did not recognize the response as a file.

C# code after ajax post:

  [HttpPost]
    public IHttpActionResult PostSavedReportExcel([FromBody]List<SavedReports> savedReports, [FromUri] string dateid)
    {
        //some excel creation code
                          HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content = new StreamContent(new MemoryStream(package.GetAsByteArray()))

            };
            response.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
            response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment")
            {
                FileName = dateid + "_report.xlsx"
            };
            ResponseMessageResult responseMessageResult = ResponseMessage(response);
            return responseMessageResult;
    }

Usually, for this kind of result I could use window.location = myurltocontroller to download properly , but that is only for GET requests, POST anything is not possible.

I found some answers which could help me in this topic: JavaScript post request like a form submit

This points out I should go with creating a form, which passes the values, but I do not know how to do so in case of arrays (the table consists 50*10 = 500 values which I have to pass in the form)

I tried some only frontend solutions to the html-excel export problem, which of course does not require to build files on api side, but free jquery add-ins are deprecated, not customizeable, handle only .xls formats, etc.

I found EPPlus nuget package a highly customizeable tool, that is why I want to try this is at first place.

So the question is: how can I post an array of 500 elements, that the controller will recognize, generate the file, and make it automatically download from browser?

If you can provide some code that would be fantastic, but giving me the right direction is also helpful.

Thank you.

Answer 1

You can use fetch() (docs) to send the request from the JS frontend. When the browser (JS) has received the response, it can then offer its binary content as a download. Something like this:

fetch("http://your-api/convert-to-excel", // Send the POST request to the Backend
    {
        method:"POST",
        body: JSON.stringify(
            [[1,2],[3,4]] // Here you can put your matrix
        )
    })
    .then(response => response.blob())
    .then(blob => {
        // Put the response BLOB into a virtual download from JS
        if (navigator.appVersion.toString().indexOf('.NET') > 0) {
            window.navigator.msSaveBlob(blob, "my-excel-export.xlsx");
        } else {
            var a = window.document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = "my-excel-export.xlsx";
            a.click();
        }});

So the JS part of the browser actually first downloads the file behind the scenes, and only when it's done, it's triggering the "download" from the browsers memory into a file on the HD. This is a quite common scenario with REST APIs that require bearer token authentication.