Create a CSV file through an MVC Web API HttpResponse and retrieve it using AngularJS for downloading

Question

Create a CSV file through an MVC Web API HttpResponse and retrieve it using AngularJS for downloading

I am attempting to create a CSV file from my web API and retrieve that file using angularjs. Below is an example of my API controller:

 [HttpPost]
    public HttpResponseMessage GenerateCSV(FieldParameters fieldParams)
    {
        var output = new byte[] { };
        if (fieldParams!= null)
        {
            using (var stream = new MemoryStream())
            {
                this.Serialize(fieldParams, stream);
                stream.Flush();
                output = stream.ToArray();
            }
        }
        var result = new HttpResponseMessage(HttpStatusCode.OK) { Content = new ByteArrayContent(output) };
        result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
        result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
        {
            FileName = "Fields.csv"
        };
        return result;
    }

In my angularjs code, I have the following:

$scope.save = function () {
        var csvInput= extractDetails();

        // File is an angular resource. We call its save method here which
        // accesses the API above to retrieve the CSV content
        File.save(csvInput, function (content) {
            console.log(content);

            // This currently creates a CSV file with "[object Object]" written in it
            var hiddenElement = document.createElement('a');
            hiddenElement.href = 'data:text/csv;charset=utf-8,\uFEFF' + encodeURI(content.Parameters);
            hiddenElement.target = '_blank';
            hiddenElement.download = 'myFile.csv';
            hiddenElement.click();
        });
    };

For instance, if the response content in my API controller is:

output

{byte[152]}

[0]: 83

[1]: 101

[2]: 44

[3]: 67

[4]: 10

When I receive this in angularjs and log the value of content, this is what is displayed:

{Parameters: Array[1], $promise: Object, $resolved: true, $get: function, $save: function…}

0:"S"

1: "e"

2: ","

3: "C"

4: "↵"

$promise: object

$resolved: true`

Why does the content received in angularjs already contain characters instead of a byte array?
How can I manipulate the content to focus only on the CSV data and exclude $promise and $resolved? Why are they included initially? How can they be removed?
If my current approach is incorrect, what is the proper way to generate a CSV file? :(

javascript angularjs csv asp.net-web-api httpresponse

Answer 1

Answer №1

Recently discovered a solution for this issue:

Two separate APIs will be utilized for handling the data processing - one for storing the data (POST) and the other for retrieving the file (GET).

POST:

    [HttpPost]
    public async Task<HttpResponseMessage> BuildFile(FileParameters fileParams)
    {
        var guid = Guid.NewGuid().ToString();
        if (fileParams!= null)
        {
            await Task.Run(() => FileContents.Add(guid, fileParams));
            return this.Request.CreateResponse(HttpStatusCode.OK, new { Value = guid });
        }
        return this.Request.CreateErrorResponse(HttpStatusCode.BadRequest, "Invalid data");
    }

In AngularJs, store the returned GUID and pass it to another API endpoint:

 location.href = '/api/file/generatefile' + '?guid=' + generatedGuidFromAPI + '&reportName=' + $scope.reportName;

Below is the generatefile API controller in MVC:

GET:

  [HttpGet]
    public async Task<HttpResponseMessage> GenerateFile(string guid, string reportName)
    {
        byte[] output = null;
        if (FileContents.ContainsKey(guid))
        {
            await Task.Run(() =>
            {
                using (var stream = new MemoryStream())
                {
                    this.CreateFile(FileContents[guid], stream);
                    stream.Flush();
                    output = stream.ToArray();
                }
            });
        }

        FileContents.Remove(guid);
        if (output != null)
        {
            var result = new HttpResponseMessage(HttpStatusCode.OK) { Content = new ByteArrayContent(output) };
            result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
            result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
            {
                FileName = reportName + ".csv"
            };
            return result;
        }

        return this.Request.CreateErrorResponse(HttpStatusCode.NoContent, "No record found");
    }

Utilizing location.href triggers automatic downloading of the file by the browser.

Answer 2

Recently discovered a solution for this issue:

Two separate APIs will be utilized for handling the data processing - one for storing the data (POST) and the other for retrieving the file (GET).

POST:

    [HttpPost]
    public async Task<HttpResponseMessage> BuildFile(FileParameters fileParams)
    {
        var guid = Guid.NewGuid().ToString();
        if (fileParams!= null)
        {
            await Task.Run(() => FileContents.Add(guid, fileParams));
            return this.Request.CreateResponse(HttpStatusCode.OK, new { Value = guid });
        }
        return this.Request.CreateErrorResponse(HttpStatusCode.BadRequest, "Invalid data");
    }

In AngularJs, store the returned GUID and pass it to another API endpoint:

 location.href = '/api/file/generatefile' + '?guid=' + generatedGuidFromAPI + '&reportName=' + $scope.reportName;

Below is the generatefile API controller in MVC:

GET:

  [HttpGet]
    public async Task<HttpResponseMessage> GenerateFile(string guid, string reportName)
    {
        byte[] output = null;
        if (FileContents.ContainsKey(guid))
        {
            await Task.Run(() =>
            {
                using (var stream = new MemoryStream())
                {
                    this.CreateFile(FileContents[guid], stream);
                    stream.Flush();
                    output = stream.ToArray();
                }
            });
        }

        FileContents.Remove(guid);
        if (output != null)
        {
            var result = new HttpResponseMessage(HttpStatusCode.OK) { Content = new ByteArrayContent(output) };
            result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
            result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
            {
                FileName = reportName + ".csv"
            };
            return result;
        }

        return this.Request.CreateErrorResponse(HttpStatusCode.NoContent, "No record found");
    }

Utilizing location.href triggers automatic downloading of the file by the browser.

Answer 3

Answer №2

Here is my method for achieving this (tested in Chrome):

    // This is a WebAPI controller action
    public IHttpActionResult Get(string rpt, DateTime date)
    {
        List<DailyMIReportViewModel> list = new List<DailyMIReportViewModel>();

        // Perform operations to generate a list of items

        // Download Requested
        if (rpt == "dailymidl")
        {
            // Create a byte array of the CSV data
            byte[] csvData = WriteCsvWithHeaderToMemory(list);
            // Create FileContentResult with the CSV byte array
            FileContentResult result = new FileContentResult(csvData, "application/octet-stream");
            // Set the filename in the FileContentResult
            result.FileDownloadName = "Report.csv";

            return Ok(result);
        }
        // Data Requested
        return Ok(list);

        // Client-side AngularJS code
        // Function called on button click
        $scope.generateMIDownload = function (forDate) {
            // Using $resource to return a promise with FileContentResult payload
            reportsRepository.dailymidl(forDate).$promise.then(
            function (data) {
                // Success
                // NOTE: adding base64 made it work

                var dataUrl = 'data:application/octet-stream;base64,' + data.FileContents
                var link = document.createElement('a');
                angular.element(link)
                  .attr('href', dataUrl)
                  .attr('download', data.FileDownloadName)
                  .attr('target','_blank')
                link.click();
            },
            function (response) {
                // Error handling
            });
        }

        // Reports Repository reference
        angular.module('msgnr').factory('reportsRepository', function ($resource) {
            return {
                dailymidl: function (date) {
                    return $resource('/api/Report/', { rpt: 'dailymidl', date: date, toDate: date }).get();
            }
        }
    });

This information may be useful for others as well.

Answer 4

Here is my method for achieving this (tested in Chrome):

    // This is a WebAPI controller action
    public IHttpActionResult Get(string rpt, DateTime date)
    {
        List<DailyMIReportViewModel> list = new List<DailyMIReportViewModel>();

        // Perform operations to generate a list of items

        // Download Requested
        if (rpt == "dailymidl")
        {
            // Create a byte array of the CSV data
            byte[] csvData = WriteCsvWithHeaderToMemory(list);
            // Create FileContentResult with the CSV byte array
            FileContentResult result = new FileContentResult(csvData, "application/octet-stream");
            // Set the filename in the FileContentResult
            result.FileDownloadName = "Report.csv";

            return Ok(result);
        }
        // Data Requested
        return Ok(list);

        // Client-side AngularJS code
        // Function called on button click
        $scope.generateMIDownload = function (forDate) {
            // Using $resource to return a promise with FileContentResult payload
            reportsRepository.dailymidl(forDate).$promise.then(
            function (data) {
                // Success
                // NOTE: adding base64 made it work

                var dataUrl = 'data:application/octet-stream;base64,' + data.FileContents
                var link = document.createElement('a');
                angular.element(link)
                  .attr('href', dataUrl)
                  .attr('download', data.FileDownloadName)
                  .attr('target','_blank')
                link.click();
            },
            function (response) {
                // Error handling
            });
        }

        // Reports Repository reference
        angular.module('msgnr').factory('reportsRepository', function ($resource) {
            return {
                dailymidl: function (date) {
                    return $resource('/api/Report/', { rpt: 'dailymidl', date: date, toDate: date }).get();
            }
        }
    });

This information may be useful for others as well.

Create a CSV file through an MVC Web API HttpResponse and retrieve it using AngularJS for downloading

Answer №1

Answer №2

Similar questions

What are the steps for sorting objects in an array by their data type attribute?

Perform a task if a checkbox is marked or unmarked

Locating the dot character within regular expression challenges

effective methods for setting up live reload feature for an Angular application

Modify capital letters to dashed format in the ToJSON method in Nest JS

Express not invoking Passport LocalStrategy

Tips for sorting through JSON Data to isolate a particular day

Remove an item from a complex JSON structure based on the specified name. The function will then return the

How to customize the text color of the notchedOutline span in Material UI

convert JSON to Java object using GSON with a map

Ways to Access a Variable from One Controller to Another Controller without Utilizing Scope

Issues with loading shared examples in Jasmine and AngularJS

Ensure that the ng-view element has a height of 100% and

Launch a new window for a div when a button is clicked

Is there a way to allow only the block code to shift while keeping the other span tags stationary?

What is the functionality of require(../) in node.js?

Combine strings in an array of objects

Issue with passing parameter values in MVC Html.ActionLink

Is there a method to incorporate a scroll event into the ng-multi-selectdropdown, a npm package?

Choose a JavaScript function by clicking on the HTML text