angularjs csv download to local

Question

I made the service side to return csv format when I call the service with $http Get with Angular if the user click the button..

So the return is like 1,2,3,4,5,6,7,8,9,10

What is the best way to give the user the way to save it their local machine?

if your server is already creating the data in a format that is acceptable to your user, can the button just forward them to that URL (making sure that the mime type is correct, of course!) — Roy Truelove
– Roy Truelove, Commented Nov 1, 2012 at 0:51
You're best off pushing the download to the user using the server. What server architecture do you have (eg PHP or Java or Node) — Andrew Joslin
– Andrew Joslin, Commented Nov 1, 2012 at 3:02
But the tricky thin is that the service can only accept POST.. If the service can accept GET, there is no problem to redirect the user.. But How can I do it with POST? — MomentH
– MomentH, Commented Nov 1, 2012 at 5:35
@Rok First you are talking about GET, now about POST. What are you looking for? I also don't get why you need to retrieve the CSV if its anyway just for downloading? Simply add a link to your API (or whatever the CSV comes from) and you are done, aren't you? — F Lekschas
– F Lekschas, Commented Nov 1, 2012 at 10:28
Yep.. I was confused.. Forward traffic to API directly will solve my problem... thanks :) — MomentH
– MomentH, Commented Nov 6, 2012 at 22:51

will · Accepted Answer · 2012-11-18 02:36:25Z

6

There are two options

1) Send the csv from your server.

2) Data URIs. I think this is what you're asking for. Here is an example

/**
 * @param{string} content The contents of a file to download.
 * @param{string} fileName The name to save the file as on the user's computer.
 */
function(content, fileName) {
  var dataUrl = 'data:text/csv;utf-9,' + encodeURI(content);
  var link = document.createElement('a');
  angular.element(link)
    .attr('href', dataUrl)
    .attr('download', fileName) // Pretty much only works in chrome
  link.click();
}

answered Nov 18, 2012 at 2:36

will

3,1914 gold badges28 silver badges30 bronze badges

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

Comments

agershun · Accepted Answer · 2014-12-16 09:26:36Z

You can try Alasql library, which can save data in CSV format one line:

 function myCtrl($scope) {
    $scope.filename = "mydata.csv";
    $scope.cities = [{city:"Odessa",population:100000},
                  {city:"Voronezh",population:201022},
                  {city: "Paris", population: 3000000}];

    $scope.saveCSV = function(filename, content) {
          alasql('SELECT city, population INTO CSV("'+$scope.filename+'",{headers:true}) FROM ?',
           [$scope.cities]);
    };
 };

See the full example code in jsFiddle.

In this example Alasql use SELECT operator to choose required fields from data array (AngularJS' creates $$hashKey field, which probably is not needed to users). If you do not use on these data simply export to CSV file with:

alasql('SELECT * INTO CSV('mydata.csv') FROM ?',[$scope.data]);

Collectives™ on Stack Overflow

angularjs csv download to local

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related