Download text/csv content as files from server in Angular

Question

I am trying to stream a csv file from a node.js server. The server portion is very simple :

server.get('/orders' function(req, res) {
  res.setHeader('content-type', 'text/csv');
  res.setHeader('content-disposition', 'attachment; filename='orders.csv');
  return orders.pipe(res); // assuming orders is a csv file readable stream (doesn't have to be a stream, can be a normal response)
}

In my angular controller I am trying to do something like this

$scope.csv = function() {
    $http({method: 'GET', url: '/orders'});
};

This function is called when there's a click on a button with ng-click in my view :

<button ng-click="csv()">.csv</button>

I have looked at other answers about downloading files from server in Angular, but didn't find anything that worked for me. Is there a common way to do this ? Seems like something that should be simple.

first I can see is that you url in $scope.csv isn't doesn't correspond with what you have in server.get — dcodesmith
– dcodesmith, Commented Jan 3, 2014 at 12:57
@dcodesmith ignore that please (fixed) was just for the question. I actually do see the request on the server — Michael
– Michael, Commented Jan 3, 2014 at 12:59

dcodesmith · Accepted Answer · 2016-02-24 16:20:59Z

117

$http service returns a promise which has two callback methods as shown below.

$http({method: 'GET', url: '/someUrl'}).
  success(function(data, status, headers, config) {
     var anchor = angular.element('<a/>');
     anchor.attr({
         href: 'data:attachment/csv;charset=utf-8,' + encodeURI(data),
         target: '_blank',
         download: 'filename.csv'
     })[0].click();

  }).
  error(function(data, status, headers, config) {
    // handle error
  });

edited Feb 24, 2016 at 16:20

answered Jan 3, 2014 at 13:06

dcodesmith

9,6244 gold badges38 silver badges40 bronze badges

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

17 Comments

Michael Over a year ago

That doesn't solve my problem since it just prints the file content to the console. I need to tell it somehow to let the browser handle the download...

Michael Over a year ago

It worked although in a kind of a hackish way: first chrome's popup blocker blocked the click, then when I allowed popups, it opened the download in a new window. Is there anyway to make it more pleasant ? if no, I guess it's good enough for me :)

Shreyansh Bele Over a year ago

On Mozilla Firefox is not working ...working fine in Chrome.

I3i0 Over a year ago

To get it work on Mozilla Firefox, attach your anchor to document: angular.element(document.body).append(anchor);

user3366706 Over a year ago

stackoverflow.com/a/35448277/3366706 works for IE 11 and chrome

|

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

21

Most of the references on the web about this issue point out to the fact that you cannot download files via ajax call 'out of the box'. I have seen (hackish) solutions that involve iframes and also solutions like @dcodesmith's that work and are perfectly viable.

Here's another solution I found that works in Angular and is very straighforward.

In the view, wrap the csv download button with <a> tag the following way :

<a target="_self" ng-href="{{csv_link}}">
  <button>download csv</button>
</a>

(Notice the target="_self there, it's crucial to disable Angular's routing inside the ng-app more about it here)

Inside youre controller you can define csv_link the following way :

$scope.csv_link = '/orders' + $window.location.search;

(the $window.location.search is optional and onlt if you want to pass additionaly search query to your server)

Now everytime you click the button, it should start downloading.

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Jan 3, 2014 at 15:00

Michael

23k35 gold badges136 silver badges189 bronze badges

4 Comments

Siva Kumar Over a year ago

Is there any way to do this, if we need to post some big object to server & get the generated word/pdf file?

idbehold Over a year ago

@ShivKumar yeah, in response to the POST request return the URL to the csv.

Sanjay Over a year ago

Can you set up the JSFiddle with full controller and UI code?

Meysam Feghhi Over a year ago

This solution is no different with having a simple <a/> tag with with href evaluated by angular.

Komal Singh · Accepted Answer · 2015-08-07 07:01:01Z

21

var anchor = angular.element('<a/>');
anchor.css({display: 'none'}); // Make sure it's not visible
angular.element(document.body).append(anchor); // Attach to document

anchor.attr({
    href: 'data:attachment/csv;charset=utf-8,' + encodeURI(data),
    target: '_blank',
    download: 'filename.csv'
})[0].click();

anchor.remove(); // Clean it up afterwards

This code works both Mozilla and chrome

answered Aug 7, 2015 at 7:01

Komal Singh

4515 silver badges19 bronze badges

6 Comments

Corey Quillen Over a year ago

Thank you for this answer. This one does work in Chrome and Firefox.

valeriocomo Over a year ago

Which version of each browser?

Lavamantis Over a year ago

This is genius. The technique can be used to download arbitrary data from angular as a file.

Komal Singh Over a year ago

what is IE version ?

Chiranjib Over a year ago

works fine in firefox and chrome but not working in safari

|

Nilath · Accepted Answer · 2016-02-17 05:35:53Z

7

This is what worked for me for IE 11+, Firefox and Chrome. In safari it downloads a file but as unknown and the filename is not set.

if (window.navigator.msSaveOrOpenBlob) {
    var blob = new Blob([csvDataString]);  //csv data string as an array.
    // IE hack; see http://msdn.microsoft.com/en-us/library/ie/hh779016.aspx
    window.navigator.msSaveBlob(blob, fileName);
} else {
    var anchor = angular.element('<a/>');
    anchor.css({display: 'none'}); // Make sure it's not visible
    angular.element(document.body).append(anchor); // Attach to document for FireFox

    anchor.attr({
        href: 'data:attachment/csv;charset=utf-8,' + encodeURI(csvDataString),
        target: '_blank',
        download: fileName
})[0].click();
anchor.remove();
}

edited Feb 17, 2016 at 5:35

answered Feb 17, 2016 at 5:00

Nilath

1332 silver badges8 bronze badges

Comments

forsimb · Accepted Answer · 2017-07-24 19:36:55Z

0

Using angular 1.5.9

I made it working like this by setting the window.location to the csv file download url. Tested and its working with the latest version of Chrome and IE11.

Angular

   $scope.downloadStats = function downloadStats{
        var csvFileRoute = '/stats/download';
        $window.location = url;
    }

html

<a target="_self" ng-click="downloadStats()"><i class="fa fa-download"></i> CSV</a>

In php set the below headers for the response:

$headers = [
    'content-type'              => 'text/csv',
    'Content-Disposition'       => 'attachment; filename="export.csv"',
    'Cache-control'             => 'private, must-revalidate, post-check=0, pre-check=0',
    'Content-transfer-encoding' => 'binary',
    'Expires' => '0',
    'Pragma' => 'public',
];

edited Jul 24, 2017 at 19:36

user463535

answered Jan 23, 2017 at 17:49

forsimb

911 silver badge7 bronze badges

Collectives™ on Stack Overflow

Download text/csv content as files from server in Angular

5 Answers 5

17 Comments

4 Comments

6 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

17 Comments

4 Comments

6 Comments

Comments

Comments

Linked

Related