cybozu developer network

Enhanced by Google

カテゴリー内の他の記事

集計したデータをCSVでダウンロードするには？

作成日
更新日

（著者：サイボウズ KADOYA Ryo）

 

kintoneにはデータをCSV形式でダウンロードする機能があります。通常であればこれで十分なのですが、場合によってはアプリをまたがるデータを集計したり、kintone.proxy()を使って他のサービスから取得したデータをダウンロードしたいことがあります。

ここは、kintoneカスタマイズを使って、CSVファイルをダウンロードするテクニックを紹介します。このサンプルでは単純に、column1、column2というフィールドをもったレコードをCSVに出力していますが、このテクニックを応用することで、kintoneで扱えるどんなデータでもファイルに出力することができます。

 

※このサンプルはjQueryの読み込みが必要です。

このサンプルでは、window.URL.createObjectUrlメソッドを利用してBlobオブジェクトのダウンロードURLを生成しています。window.URL.createObjectUrlの説明やサポートブラウザについてはMDNのドキュメントをご参照ください。IEはダウンロードURLの制約があるため、IE10以上でサポートされたmSaveOrOpenBlobを使ってファイルを動的にダウンロードしています。

kintoneではUTF-8の文字エンコーディングが使用されています。UTF-8で出力したCSVファイルをそのままではExcelで開けないので、ファイルの先頭にBOM(Byte Order Mark)を付けることで、Excelで開けるようにしています。もしどうしてもShift-JISで出力したい場合は、外部ライブラリを利用することでエンコーディングの変換を行うことができます。ここではぽりごん氏作のencoding.js (MIT or GPL v2 licenses)を利用した例を紹介します。

※encoding.jsはぽりごん氏によりオープンソースで提供されているライブラリです。
注意事項をよく読み、自己責任でご利用ください。

39行目から44行目を以下のように編集してください。

上記のテクニックを使うことで、お手軽にファイルのダウンロードをカスタマイズで実現することができます。ぜひお試しください。

このTipsは、2014年4月版で確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
hsy横山

お世話になります。　はじめまして　横山と申します　kadoyaさん　のスクリプトを動かそうとトライしています。

アプリのデータ項目をサンプルと同じにしjQueryの読み込みを完了して動かそうとしていますが、うまくできません。　お気ずきの点をご指摘ください。

尚サンプルコードは、サンプルのままと　jQeueryの修正をいれたもの２つを試しています。

ie11.0 を利用しています。

hsy横山により編集されました
Avatar
cybozu Development team

HISYS横山様

cybozu.com developer network運営事務局です。
いつもご活用いただきありがとうございます。

申し訳ございません。サンプルコードの一部に誤りがございました。

誤：
if ($link.length == 0) {
    // ヘッダにリンクを作成
    var $header = $(kintone.app.getHeaderMenuSpaceElement());
    $link = $('CSVでダウンロード');
    $header.append($link);
}
正：
if ($link.length == 0) {
    // ヘッダにリンクを作成
    var $header = $(kintone.app.getHeaderMenuSpaceElement());
    $link = $('<a id="download-csv" href="#">CSVでダウンロード</a>');
    $header.append($link);
}
本記事の該当箇所は修正済みです。
一旦修正後のソースコードで動作を確認いただけますでしょうか？
cybozu Development teamにより編集されました
Avatar
hsy横山

お世話になります。　横山です。　連絡有難う御座いました。　サイト掲載のソースコードは、（正）と同じ内容でした。

結論　正常に動作しました。　原因　フィールド名と表現されていた　値をフィールドコードに修正したら、動作しました。

追加で質問があります。

 

１．CSV出力の単位を分けたいのですが、可能でしょうか　データのある項目A+項目Ｂが変わる毎に出力

２．CSVファイル名を　A+地区コード+会社名.CSV とできますでしょうか

３．ファイル出力の確認ボックスを省略可能でしょうか

回答お願い致します

 

　　

Avatar
あすま

＞ hsy横山さん

突然すいません。
ちょうど私もこちらのソースコードをいじっておりました。

＞１．CSV出力の単位を分けたいのですが、可能でしょうか　データのある項目A+項目Ｂが変わる毎に出力

CSV出力のイベントタイミングをボタンではなく、項目変更時にダウンロード、ということであれば
レコード一覧画面のフィールド値変更時イベント
が参考になりそうです。

＞２．CSVファイル名を　A+地区コード+会社名.CSV とできますでしょうか

地区コード、会社名はフィールドの値で
サンプルの以下の部分を変更すれば可能かと思います。

 var fileName = "download.csv";//←ここがファイル名になっているようなので「"A" + "地区コード" + "会社名" + ".csv"」と変更
 if (window.navigator.msSaveOrOpenBlob) {
 // for IE
 $link.unbind();

＞３．ファイル出力の確認ボックスを省略可能でしょうか
こちらについてはIEの仕様やOSに依存するようですね。
私も確認ボックスを省略しようとしたのですが調べてもなかなか見つからず・・・。

Avatar
hsy横山

辻谷様

回答有難う御座います。

確認させて戴きます。

追加でご教示戴きたい事があります。

csvファイル名の地区コードは、会社名は、レコードのデータの値を入れたいのですが、コード記入を教えて戴けないでしょうか

hsy横山

 

 

 

Avatar
hsy横山

辻谷様

お世話になります

 

１．の補足ですレコード中の地区コードと会社コードが変わる毎にcsv出力をしたいと考えています。

入力値が変わるときでは、なくレコードに値が既にあります。　その場合のイベントは、どう考えれば良いでしょうk

Avatar
hsy横山

辻谷様

お世話になります。

指摘戴いた部分は、動作する様になりました。　有難う御座います。

以下条件でCSVを分けて出力するコード修正のアドバイスをお願いします

 

・同じレコード中の確定年月、地区コード、会員コードが変わる迄同じCSV出力します。　

・ファイル出力の確認ボックスを省略し、PCのパスに直接出力は、可能でしょうか

 

 

 

 

サインインしてコメントを残してください。