5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

ん~熱っぽい・・・あー風邪ひいたかなぁ・・・→ 体温計起動!! 
→ 35.3度・・・・はい、のんびんです!!

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

実はQiita初投稿です、私。
さてさて、何を書こうか悩んだんですが、今回はkintoneからwijmoを利用してExcel出力する方法をご紹介しようかと思います。
実際に自分で利用したときに、便利な点や微妙な点が見えたので、ここで共有させてもらいます。

#まずは準備
kintoneのアプリストアから、アプリをダウンロードします。
(今回は顧客リスト)

image

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

image

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

image

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

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

と、設定してください。
ここにwijmoのgridが表示されます。

アプリにデータを入れて
image

追加したら一覧を確認!
image

・・・まぁそうだよね。
プログラムを何も入れてないもん・・・

#画面に出してみよう!
では、プログラムを追加しましょう!

今回必要なソースはこれ!!
 ◆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っぽい画面が!!?
ヘッダー部分も指定したものが表示されています。

image

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

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

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');
    });    
    // 後で処理が入るよ!!

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

image

お!ボタンがでましたね!
早速クリックしてみましょう。

image

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

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

#この先きっと困ること
えーと、実はここまでは意外と簡単にできちゃうんですが、
flexgridをそのまま出力ではなく、
帳票のような形で出力したい!!
ってな要望がでると・・・ふふふ、結構苦労します。

excelでは普通に使っている
 ・折り返して全体を表示する
 ・ユーザ書式(1000→1,000円)
などが利用できなかったりする。
ヘッダー列の結合や、その他スタイルの適用などもなかなか苦戦する・・・てかしました。
今後は、この続きとして、そのあたりも更新していきたいと思います。

と、ネガティブなことを書いちゃいましたが、
サーバレスでkintoneからExcel出力できるのは素晴らしい!!

(今までだと、kintone→AWS Lambda(JAVA&POI)→kintoneとかしていた)
せっかくライセンスも購入したので、今後もガシガシ使って行く予定です!

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

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?