Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

ん~熱っぽい・・・あー風邪ひいたかなぁ・・・→ 体温計起動!! 
→ 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を利用してみてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした