オブジェクト配列をカンマ区切りテキストファイルに変換するには? - ngCSV
ngCSVは、与えられたオブジェクト配列をもとにカンマ区切りテキスト(CSV)ファイルを生成し、ダウンロードさせることができます。
ngCSVは、Bowerを利用することで、以下のコマンドでインストールできます。
> bower install --save ng-csv
では、具体的な例もみてみましょう。以下は、あらかじめ用意したJSON形式のファイル(books.json)を$httpサービス経由で取得し、その内容をCSVファイルとして出力する例です。もちろん、実際のアプリではデータベースなどから取得した情報をJSON形式に変換したものを出力することになるでしょう。
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8" /> <title>AngularJS</title> <!-- (1)ngCSV本体とngSanitizeモジュールをインポート --> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script> <script src="bower_components/ng-csv/build/ng-csv.min.js"></script> <script src="scripts/csv.js"></script> </head> <body ng-controller="MyController"> <!-- (3)ボタンにダウンロード機能を付与--> <button type="button" ng-csv="getDetail()" filename="books.csv" csv-header="headers"> 書籍情報取得 </button> </body> </html>
// (2)ngCsv/ngSanitizeモジュールへの依存関係を設定 angular.module('myApp', ['ngSanitize', 'ngCsv']) .controller('MyController', ['$scope', '$http', function($scope, $http) { $scope.headers = [ 'ISBNコード', '書名', '価格', '出版社', '刊行日' ]; $scope.getDetail = function() { return $http.get('scripts/books.json') .then(function(response) { return response.data; }); }; }]);
[ { "isbn":"978-4-8222-9876-0", "title":"アプリを作ろう! Visual C++入門", "price":2000, "publish":"日経BP社", "published":"2016-06-22" }, ...中略... ]
ngCSVを利用するには、ライブラリ本体(ng-csv.min.js)に加えてAngularJS標準のngSanitizeモジュールをインポートした上で(1)、アプリモジュール(myApp)からはngCsv/ngSanitizeモジュールへの依存関係を宣言します(2)。
あとは、ファイルをダウンロードするためのボタンに対して、ng-csv属性(ディレクティブ)を付与することで、CSVファイルのダウンロード機能を付与できます(3)。また、ダウンロードに関わるパラメーターを、以下の属性で指定できます。
属性名 | 概要 |
---|---|
ng-csv | CSV生成のもととなるオブジェクト配列(または、配列を返すPromiseオブジェクト) |
filename | ダウンロードファイル名 |
csv-header | ヘッダー列名の配列 |
field-separator | 区切り文字(デフォルトはカンマ) |
text-delimiter | エスケープ文字(デフォルトはダブルクォート) |
quote-strings | すべての文字列フィールドをエスケープ文字で括るか |
add-bom | ファイルにBOM(Byte Order Mark)を追加するか |
たとえばfield-separator属性を「\t」とすることで、タブ区切りファイルを生成することも可能です。