Posted at
kintoneDay 11

Excelをダウンロードしたい!?じゃあwijmoのflexgridを使ってみますか・・・

More than 1 year has passed since last update.

ん~熱っぽい・・・あー風邪ひいたかなぁ・・・→ 体温計起動!! 

→ 35.3度・・・・はい、のんびんです!!

kintone Advent Calender 11日目の記事ですね!

実はQiita初投稿です、私。

さてさて、何を書こうか悩んだんですが、今回はkintoneからwijmoを利用してExcel出力する方法をご紹介しようかと思います。

実際に自分で利用したときに、便利な点や微妙な点が見えたので、ここで共有させてもらいます。


まずは準備

kintoneのアプリストアから、アプリをダウンロードします。

(今回は顧客リスト)

このままだとカスタマイズする際に、わかりづらいので、フィールドコードをフィールド名と同じにします。

フィールドコードの設定が終わったら、一覧を追加します。

※この際、一覧はカスタマイズでHTML部に



<div id="grid"></div>



と、設定してください。

ここにwijmoのgridが表示されます。

アプリにデータを入れて

追加したら一覧を確認!

・・・まぁそうだよね。

プログラムを何も入れてないもん・・・


画面に出してみよう!

では、プログラムを追加しましょう!

今回必要なソースはこれ!!

 ◆JavaScript

  ・https://js.cybozu.com/jquery/2.2.4/jquery.min.js

  ・https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js

  ・wijmo.js

  ・wijmo.xlsx.js

  ・wijmo.grid.js

  ・wijmo.grid.xlsx.js

  ・nonbin.js

 ◆CSS

  ・wijmo.min.css

  ・wijmo.theme.office.min.css

※wijmoに関してはここからトライアル版がダウンロードできます。


nonbin.js

(function () {

"use strict";
var flexGrid = null;
kintone.events.on('app.record.index.show', function(event){
//一覧表示イベント時のレコード
var records = event.records;
// 行ヘッダーのリスト
var columns = [];
columns = [{
// 紐づけるデータのキー
binding: '会社名',
// 表示するヘッダー文字列(フィールドコードとは別の文字を設定できる)
header: '会社名(正式名称)',
// 表示幅
width:400
}];
// 今回はいくつか先にヘッダを設定しておく
columns.push({ binding: '部署名', header: '部署', width:220 });
columns.push({ binding: '担当者名', header: '担当者', width:120 });
columns.push({ binding: '郵便番号', header: '', width:120 });
columns.push({ binding: 'TEL', header: '電話番号', width:120 });

var rowList;
var dataList = [];
for(var i=0; i<records.length; i++){
rowList = {};
for(var field in records[i]){
if (!checkField(columns,field)) continue;
rowList[field] = records[i][field].value;
}
dataList.push(rowList);
}
var cv = new wijmo.collections.CollectionView(dataList);
if (!flexGrid) {
flexGrid = new wijmo.grid.FlexGrid('#grid', {
// グリッドに表示するデータ
itemsSource : cv,
// グリッドに表示するカラムヘッダー
columns : columns,
// 読み取り専用
isReadOnly : true,
// 自動でカラムを作成するか
autoGenerateColumns : true
});
} else {
// 既に存在した場合
flexGrid.itemsSource = cv;
}
// 後で処理が入るよ!!

// 後で処理が入るよ!!

});
/**フィールドが出力対象かチェック */
function checkField(_columns,_field)
{
for (var i=0;i<_columns.length;i++) {
if (_columns[i].binding === _field) {
// 出力対象のフィールド
return true;
}
}
return false;
}
})();


nonbin.jsを読み込ませると、Excelっぽい画面が!!?

ヘッダー部分も指定したものが表示されています。

ここまでできたらあと一歩、ダウンロード向けてもうちょっと頑張りましょう。


ダウンロードの準備

まずはダウンロードするためのボタンを追加しましょう!


nonbin.js

    // 後で処理が入るよ!!

// 後で処理が入るよ!!


となっていた場所に


nonbin.js

    // 後で処理が入るよ!!

// 出力ボタンを追加!
var hDiv = document.createElement('div');
hDiv.id = 'print'
var excelOutputBtn = document.createElement('button');
excelOutputBtn.id = 'excelOutputBtn';
excelOutputBtn.innerHTML = 'Excelが出力されちゃいます';
// ボタンのクラスは自分で設定してね?
// excelOutputBtn.class = 'kintone-button-normal';
// excelOutputBtn.className = 'kintone-button-normal';
hDiv.appendChild(excelOutputBtn);
kintone.app.getHeaderMenuSpaceElement().appendChild(hDiv);

$("#excelOutputBtn").click(function() {
var workbook = wijmo.grid.xlsx.FlexGridXlsxConverter.save(flexGrid, {
includeCellStyles: true
});
workbook.save('顧客管理.xlsx');
});
// 後で処理が入るよ!!


といった具合に処理を追加します!

お!ボタンがでましたね!

早速クリックしてみましょう。

ダウンロードしたExcelファイルを表示してみます。

おおお!でた!!!

画面に表示できちゃうと、その先は意外と簡単に出力することができます!!


この先きっと困ること

えーと、実はここまでは意外と簡単にできちゃうんですが、

flexgridをそのまま出力ではなく、

帳票のような形で出力したい!!

ってな要望がでると・・・ふふふ、結構苦労します。

excelでは普通に使っている

 ・折り返して全体を表示する

 ・ユーザ書式(1000→1,000円)

などが利用できなかったりする。

ヘッダー列の結合や、その他スタイルの適用などもなかなか苦戦する・・・てかしました。

今後は、この続きとして、そのあたりも更新していきたいと思います。

と、ネガティブなことを書いちゃいましたが、

サーバレスでkintoneからExcel出力できるのは素晴らしい!!

(今までだと、kintone→AWS Lambda(JAVA&POI)→kintoneとかしていた)

せっかくライセンスも購入したので、今後もガシガシ使って行く予定です!

興味のある方は是非、kintoneでwijmoを利用してみてください。