8

I am using the angularJS frontend framework and nodejs/express as a backend server to send and receive JSON. The backend sent a large JSON object to the frontend and I was wondering if I could download the JSON object from the frontend in CSV format.

The data is stored as json in an scope variable: $scope.data in an angular controller. Then I converted the data to a string in CSV format in the variable $scope.CSVdata. How do I get the CSVdata to download from the client browser?

I know nodejs can be set up to send a file in CSV format but it would be nice to keep the backend a clean JSON api.

GTDev
  • 5,258
  • 8
  • 45
  • 80
  • Why do you not just convert it on the client side after you get it? Since you're using Node it would be the same code anyways, and that way you can keep your API fully JSON. Also, what exactly are you asking? Converting JSON to CSV, or getting the data to a download button in Angular, or both? – Nick Mitchinson Mar 28 '13 at 18:54
  • I'm asking how to get data in CSV format from angular to download from a client. I'm less concerned about converting it to CSV format. I'll update the question in a sec. – GTDev Mar 28 '13 at 18:57
  • There is a really good solution here: http://stackoverflow.com/a/13903928/1804678 – Jess Nov 06 '13 at 10:37

1 Answers1

9

Referencing this post I've thrown together quick demonstration on how this may be done using AngularJS:

JavaScript Demo (Plunker)

I've wrapped the referenced Base64 code in a service, and use it in the following way:

$scope.downloadCSV = function() {
  var data = Base64.encode($scope.CSVData);
  window.location.href = "data:text/csv;base64," + data;
};

There are some disadvantages to this method however as mentioned in the comments. I've pulled out some bullet points from the Wikipedia page on this subject. Head over there for the full list.

  • Data URIs are not separately cached from their containing documents (e.g. CSS or HTML files), therefore the encoded data is downloaded every time the containing documents are re-downloaded.
  • Internet Explorer 8 limits data URIs to a maximum length of 32 KB. (Internet Explorer 9 does not have this limitation)
  • In IE 8 and 9, data URIs can only be used for images, but not for navigation or JavaScript generated file downloads.[7]
  • Base64-encoded data URIs are 1/3 times larger in size than their binary equivalent. (However, this overhead is reduced to 2–3% if the HTTP server compresses the response using gzip)
  • Data URIs do not carry a filename as a normal linked file would. When saving, a default filename for the specified MIME type is generally used.
  • [ . . . ]
Community
  • 1
  • 1
Jay
  • 16,941
  • 11
  • 49
  • 71
  • Using this approach (Client side download) is the data size limited? I think it is. – Jess Nov 05 '13 at 16:24
  • See disadvantages of this approach: http://en.wikipedia.org/wiki/Data_URI_scheme#Disadvantages – Jess Nov 06 '13 at 09:29
  • Thanks for the additional information - I've updated the answer to include it. – Jay Nov 06 '13 at 13:10