download csv file from web api in angular js

Question

my API controller is returning a csv file as seen below:

 [HttpPost] public HttpResponseMessage GenerateCSV(FieldParameters fieldParams) { var output = new byte[] { }; if (fieldParams!= null) { using (var stream = new MemoryStream()) { this.SerializeSetting(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 = "File.csv" }; return result; }

and my angularjs that will send and receive the csv file is shown below:

$scope.save = function () { var csvInput= extractDetails(); // File is an angular resource. We call its save method here which // accesses the api above which should return the content of csv File.save(csvInput, function (content) { var dataUrl = 'data:text/csv;utf-8,' + encodeURI(content); var hiddenElement = document.createElement('a'); hiddenElement.setAttribute('href', dataUrl); hiddenElement.click(); }); };

In chrome, it downloads a file which is called document but has no file type extension. The content of the file is [Object object].

In IE10, nothing is downloaded.

What could i do to fix this?

UPDATE: This might work for you guys out there with the same problem: link

DOM manipulation shouldn't be done in controllers

Yashika Garg
– Yashika Garg

2015-04-08 17:53:26 +00:00
Commented Apr 8, 2015 at 17:53 — Yashika Garg
– Yashika Garg, Commented Apr 8, 2015 at 17:53

Community · Accepted Answer · 2017-05-23 12:34:08Z

62

Try it like :

File.save(csvInput, function (content) { var hiddenElement = document.createElement('a'); hiddenElement.href = 'data:attachment/csv,' + encodeURI(content); hiddenElement.target = '_blank'; hiddenElement.download = 'myFile.csv'; hiddenElement.click(); });

based on the most excellent answer in this question

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Nov 30, 2013 at 13:04

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

18 Comments

adeneo Over a year ago

Then content is an object, and not a csv string. console.log content and see what you get.

raberana Over a year ago

it was an array of characters

Andrew Thomas Over a year ago

Were you able to resolve this issue? We are getting the binary contents of the excel file in a json object also.

Krishna Over a year ago

should use $http instead of $resource to get csv string; $resource is expected to work well with objects to json

justin Over a year ago

@Krishna is correct, see similar answer here: stackoverflow.com/a/17888624/1848999

|

Manu Sharma · Accepted Answer · 2014-12-30 02:54:42Z

I used the below solution and it worked for me.

 if (window.navigator.msSaveOrOpenBlob) { var blob = new Blob([decodeURIComponent(encodeURI(result.data))], { type: "text/csv;charset=utf-8;" }); navigator.msSaveBlob(blob, 'filename.csv'); } else { var a = document.createElement('a'); a.href = 'data:attachment/csv;charset=utf-8,' + encodeURI(result.data); a.target = '_blank'; a.download = 'filename.csv'; document.body.appendChild(a); a.click(); }

malix · Accepted Answer · 2015-04-08 04:29:43Z

None of those worked for me in Chrome 42...

Instead my directive now uses this link function (base64 made it work):

 link: function(scope, element, attrs) { var downloadFile = function downloadFile() { var filename = scope.getFilename(); var link = angular.element('<a/>'); link.attr({ href: 'data:attachment/csv;base64,' + encodeURI($window.btoa(scope.csv)), target: '_blank', download: filename })[0].click(); $timeout(function(){ link.remove(); }, 50); }; element.bind('click', function(e) { scope.buildCSV().then(function(csv) { downloadFile(); }); scope.$apply(); }); }

Community · Accepted Answer · 2017-05-23 12:17:51Z

The last answer worked for me for a few months, then stopped recognizing the filename, as adeneo commented ...

@Scott's answer here is working for me:

Download file from an ASP.NET Web API method using AngularJS

Ricky Boy · Accepted Answer · 2016-09-13 00:58:19Z

I had to implement this recently. Thought of sharing what I had figured out;

To make it work in Safari, I had to set target: '_self',. Don't worry about filename in Safari. Looks like it's not supported as mentioned here; https://github.com/konklone/json/issues/56 (http://caniuse.com/#search=download)

The below code works fine for me in Mozilla, Chrome & Safari;

 var anchor = angular.element('<a/>'); anchor.css({display: 'none'}); angular.element(document.body).append(anchor); anchor.attr({ href: 'data:attachment/csv;charset=utf-8,' + encodeURIComponent(data), target: '_self', download: 'data.csv' })[0].click(); anchor.remove();

Paul Taylor · Accepted Answer · 2015-11-18 11:44:19Z

Rather than use Ajax / XMLHttpRequest / $http to invoke your WebApi method, use an html form. That way the browser saves the file using the filename and content type information in the response headers, and you don't need to work around javascript's limitations on file handling. You might also use a GET method rather than a POST as the method returns data. Here's an example form:

<form name="export" action="/MyController/Export" method="get" novalidate> <input name="id" type="id" ng-model="id" placeholder="ID" /> <input name="fileName" type="text" ng-model="filename" placeholder="file name" required /> <span class="error" ng-show="export.fileName.$error.required">Filename is required!</span> <button type="submit" ng-disabled="export.$invalid">Export</button> </form>

user2601995 · Accepted Answer · 2017-02-28 18:54:06Z

In Angular 1.5, use the $window service to download a file.

angular.module('app.csv').factory('csvService', csvService); csvService.$inject = ['$window']; function csvService($window) { function downloadCSV(urlToCSV) { $window.location = urlToCSV; } }

Nick Jacobs · Accepted Answer · 2015-06-30 17:58:20Z

0

The a.download is not supported by IE. At least at the HTML5 "supported" pages. :(

answered Jun 30, 2015 at 17:58

Nick Jacobs

6392 gold badges11 silver badges33 bronze badges

Comments

Fadi Nouh · Accepted Answer · 2017-07-12 08:12:42Z

I think the best way to download any file generated by REST call is to use window.location example :

 $http({ url: url, method: 'GET' }) .then(function scb(response) { var dataResponse = response.data; //if response.data for example is : localhost/export/data.csv //the following will download the file without changing the current page location window.location = 'http://'+ response.data }, function(response) { showWarningNotification($filter('translate')("global.errorGetDataServer")); });

Tejashree · Accepted Answer · 2020-10-12 10:06:47Z

Workable solution:

downloadCSV(data){ const newBlob = new Blob([decodeURIComponent(encodeURI(data))], { type: 'text/csv;charset=utf-8;' }); // IE doesn't allow using a blob object directly as link href // instead it is necessary to use msSaveOrOpenBlob if (window.navigator && window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(newBlob); return; } // For other browsers: // Create a link pointing to the ObjectURL containing the blob. const fileData = window.URL.createObjectURL(newBlob); const link = document.createElement('a'); link.href = fileData; link.download = `Usecase-Unprocessed.csv`; // this is necessary as link.click() does not work on the latest firefox link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window })); setTimeout(function () { // For Firefox it is necessary to delay revoking the ObjectURL window.URL.revokeObjectURL(fileData); link.remove(); }, 5000); }

Collectives™ on Stack Overflow

download csv file from web api in angular js

10 Answers 10

18 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

18 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related