38ch blog

気になるから言いたい。

Alasqlを使ってAngularでCSVダウンローダーを実装する

https://cloud.githubusercontent.com/assets/1063454/19309516/94f8007e-9085-11e6-810f-62fd60b42185.png

KPI管理ツールとかを開発してるとよくある要件としてCSVでデータをダウンロードするという機能。
Alasqlというライブラリを使うと簡単にangularで実装できるみたいだったのでやってみました。本来はその名の通りSQLを書くためのものですが、CSVダウンロードも簡単にできる。

github.com このAndrey Gershunというおじちゃんがメインで作ってる・・・?

インストール

お好きな方法でインストールしてください。

npm install --save alasql      # node
bower install --save alasql    # bower
import alasql from 'alasql';   # meteor
npm install -g alasql          # command line

CDNでやる場合はこちらをHTMLに

<script src="http://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>

インストールした場合もちゃんとalasql.min.jsをHTMLに読み込ませてあげましょう。

ダウンローダーを実装

基本的には以下のみ。簡単すぎる!

    alasql.promise('SELECT * INTO CSV("my.csv", {headers:false}) FROM ?',[data])
            .then(function(){
                 console.log('Data saved');
            }).catch(function(err){
                 console.log('Error:', err);
            });;

ここでは単純にSELECT * FROMでやっているけど、WHEREとかGROUP BYとかORDER BYとかも使用可能。 しかし、そもそものデータを持ってくるサーバーサイドでも何かしらのSQLを書いていると思うので、そことの兼ね合いは考える必要あり。サーバーサイドでもフロントエンドでもSQL書いてるのはダサいので。

上記はheaderを無しにしてるけど、trueにすれば付け加えることも可能。
あとは、デフォルトのseparatorが;になっているので、それを,に変えないと、上手くCSV上でセルが分かれなかった。

※参考元 jsfiddle.net