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.

4

1 に答える 1

9

この投稿を参照して、AngularJS を使用してこれを行う方法について簡単なデモをまとめました。

JavaScript デモ (プランカー)

参照されている Base64 コードをサービスにラップし、次のように使用します。

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

ただし、コメントに記載されているように、この方法にはいくつかの欠点があります。このテーマに関するウィキペディアのページからいくつかの箇条書きを抜き出しました。完全なリストについては、そこに向かいます。

  • データ URI は、それを含むドキュメント (CSS または HTML ファイルなど) から個別にキャッシュされないため、含まれるドキュメントが再ダウンロードされるたびに、エンコードされたデータがダウンロードされます。
  • Internet Explorer 8 では、データ URI が最大 32 KB に制限されています。(Internet Explorer 9 にはこの制限はありません)
  • IE 8 および 9 では、データ URI は画像にのみ使用できますが、ナビゲーションや JavaScript で生成されたファイルのダウンロードには使用できません。[7]
  • Base64 でエンコードされたデータ URI は、同等のバイナリの 1/3 倍のサイズです。(ただし、HTTP サーバーが gzip を使用して応答を圧縮すると、このオーバーヘッドは 2 ～ 3% に削減されます)
  • データ URI は、通常のリンクされたファイルのようにファイル名を持ちません。保存時には、通常、指定された MIME タイプのデフォルトのファイル名が使用されます。
  • [ . . . ]
于 2013-03-28T19:32:20.513 に答える