4

I have WebAPI method which returns HttpResponseMessage with .csv file as Content:

private static HttpResponseMessage FileAsAttachment(string file)
{
    var now = DateTime.Now;
    var result = new HttpResponseMessage(HttpStatusCode.OK);

    result.Content = new StringContent(file);
    result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
    result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment"); //attachment will force download
    result.Content.Headers.ContentDisposition.FileName = string.Format("Report-{0}.csv", now.ToString("MMMM"));

    return result;
}

So I have just click function, which make call to server :

$scope.GenerateReport = function() {
     var endDate = '2016-04-30';
     UserDaysSummary.generateReport({endDate: endDate }, function (result) {
          console.log("Export");
     });
}

But all that I've got - is a response with data inside. I've tried to get it as file using this and this answer, but this doesn't change anything.

Preferably, that call to the server has GET method, btw

demo
  • 6,038
  • 19
  • 75
  • 149

1 Answers1

9

Is your GenerateReport function returning a promise? Try this:

userDaysSummary.generateReport = function(endDate) {
    var defer = $q.defer();

    $http.get('path/to/api', { endDate: endDate }, { responseType: 'arrayBuffer' }).then(function(data, status, headers, config) {
        var results = {
            data: data, //your file is here
            headers: headers(), //headers are here
            status: status,
            config: config
        };

        //return a success promise containing the response object
        defer.resolve(results);

    }, function(data, status, headers, config) {
        defer.reject(data);
    });

    return defer.promise;
}

Then, using the promise to download the file:

userDaysSummary.generateReport(endDate).then(function(response) {
    //get the file
    var octetStreamMime = 'application/octet-stream';

    //get the headers' content disposition
    var cd = response.headers["content-disposition"];

    //get the file name with regex
    var regex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
    var match = regex.exec(cd);

    //is there a fiel name?
    var fileName = match[1] || "myDefaultFileName.csv";

    //replace leading and trailing slashes that C# added to your file name
    fileName = fileName.replace(/\"/g, "");

    //determine the content type from the header or default to octect stream
    var contentType = response.headers["content-type"] || octetStreamMime;

    //finally, download it
    try {
        var blob = new Blob([response.data], {type: contentType});

        //downloading the file depends on the browser
        //IE handles it differently than chrome/webkit
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(blob, fileName);
        } else {
            var objectUrl = URL.createObjectURL(blob);
            window.open(objectUrl);
        }
    } catch (exc) {
        console.log("Save Blob method failed with the following exception.");
        console.log(exc);
    }

}, function(error) {
    //an error occurred while trying the API, handle this
});
Kyle
  • 5,407
  • 6
  • 32
  • 47
  • 2 Comments - it want to generate report before I click on button and I get error `angular.js:11655 TypeError: headers is not a function` – demo Apr 28 '16 at 09:18
  • I used the following to get the headers. rest of the code works, thanks. `var contentType = response.headers()["content-type"];` – zapoo Nov 16 '17 at 17:19