kintoneから直接Excelファイルに出力する

固定リンクがコピーされました

更新日：2025年08月28日

はじめに

固定リンクがコピーされました

kintoneでExcelファイルを出力するには、csv形式で書き出した後xlsx形式に変換する必要があります。
今回は、JavaScriptカスタマイズを使ってkintoneからボタン1つで直接Excelファイルに出力する方法を紹介します。

デモ環境

固定リンクがコピーされました

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/299/

ログイン情報は cybozu developer networkデモ環境で確認してください。

完成イメージ

固定リンクがコピーされました

Excel出力用の一覧でボタンを押すと、kintoneアプリ内のデータがExcelファイルに出力されます。
今回は文字列（1行）、文字列（複数行）フィールドを出力するサンプルコードを紹介します。

kintoneアプリの作成

固定リンクがコピーされました

フォームの設定

固定リンクがコピーされました

以下のフィールドをフォームに配置します。

フィールドの種類	フィールドコード
文字列（1行）	タイトル
文字列（複数行）	詳細

カスタマイズビューの設定

固定リンクがコピーされました

Excel出力用のカスタマイズビューを作成します。
一覧の設定画面で「新しいビュー」をクリックし、ビュー名を「Excel出力」などに設定します。
レコード一覧の表示形式に「カスタマイズ」を選択します。

HTMLには以下のコードを入力します。

1
2
3
4
5


<button type="button" id="dl-xlsx">Download XLSX</button>
<h3>アプリ内データ</h3>

<table id="tabrecs" class="table-to-export" data-sheet-name="Sheet1">
</table>

JavaScriptカスタマイズ

固定リンクがコピーされました

下のサンプルコードを参考に、JavaScriptファイルoutputXLSX.jsとして保存します。

outputXLSX.js

固定リンクがコピーされました

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113


/*
 * kintone to Excel sample program
 * Copyright (c) 2025 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
(() => {
  'use strict';
  /* global saveAs */

  const CYB = {};

  // xlsx出力するkintoneのフィールド
  CYB.cols = ['タイトル', '詳細'];

  // エレメントの作成
  const createElement = (parent, element, id, objcss, objattr, html) => {
    const el = document.createElement(element);

    if (id) el.id = id;
    if (objcss) {
      Object.assign(el.style, objcss);
    }
    if (objattr) {
      Object.keys(objattr).forEach(attr => {
        el.setAttribute(attr, objattr[attr]);
      });
    }
    if (html) {
      el.innerHTML = html;
    }
    parent.appendChild(el);
  };

  // string to array buffer
  const s2ab = (s) => {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);

    for (let i = 0; i !== s.length; i += 1) {
      view[i] = s.charCodeAt(i) & 0xFF;
    }

    return buf;
  };

  // xlsxファイルの作成
  const makeExcelFile = () => {
    const wopts = {
      bookType: 'xlsx',
      bookSST: false,
      type: 'binary'
    };
    const workbook = {SheetNames: [], Sheets: {}};
    const nodelist = document.querySelectorAll('table.table-to-export');
    const node = Array.prototype.slice.call(nodelist, 0);

    node.forEach((currentValue, index) => {
      let n = currentValue.getAttribute('data-sheet-name');

      if (!n) {
        n = 'Sheet' + index;
      }
      workbook.SheetNames.push(n);
      workbook.Sheets[n] = XLSX.utils.table_to_sheet(currentValue, wopts);
    });

    const wbout = XLSX.write(workbook, wopts);
    saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), 'test.xlsx');
  };

  // Excel出力ビューを開いたときの処理
  const indexDisplayMakeExcelElement = async () => {
    const tab = document.getElementById('tabrecs');

    document.getElementById('dl-xlsx').addEventListener('click', makeExcelFile);

    try {
      // kintoneのデータを全件取得
      const client = new KintoneRestAPIClient();
      const resrec = await client.record.getAllRecords({app: kintone.app.getId(), fields: CYB.cols});

      if (resrec.length < 1) {
        throw new Error('レコードが登録されていません');
      } else {
        // kintoneのデータをtableに出力する
        resrec.forEach((record, i) => {
          const trname = 'tr' + i;
          createElement(tab, 'tr', trname);
          const trElement = document.getElementById(trname);

          CYB.cols.forEach((col, j) => {
            const tdname = trname + 'td' + j;
            createElement(trElement, 'td', tdname,
              {borderWidth: 'thin', borderStyle: 'solid'},
              null, record[col].value.replace(/\r?\n/g, '<br>'));
          });
        });
      }
    } catch (error) {
      alert(error.message);
    }
  };

  // 一覧画面が開かれたとき
  kintone.events.on(['app.record.index.show'], (ev) => {
    if (document.getElementById('dl-xlsx')) {
      indexDisplayMakeExcelElement();
    }
    return ev;
  });
})();

コード解説

固定リンクがコピーされました

一覧画面を開いたときのイベントapp.record.index.showの発生時に、出力用のデータを作成しています。

106
107
108
109
110
111
112


// 一覧画面が開かれたとき
kintone.events.on(['app.record.index.show'], (ev) => {
  if (document.getElementById('dl-xlsx')) {
    indexDisplayMakeExcelElement();
  }
  return ev;
});

kintone-rest-api-clientのgetAllRecordsメソッドで、kintoneのレコードを全件取得します。
詳細は kintone-rest-api-client を参照してください。

80
81
82


// kintoneのデータを全件取得
const client = new KintoneRestAPIClient();
const resrec = await client.record.getAllRecords({app: kintone.app.getId(), fields: CYB.cols});

取得したデータからエレメントを作成します。

17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


// エレメントの作成
const createElement = (parent, element, id, objcss, objattr, html) => {
  const el = document.createElement(element);

  if (id) el.id = id;
  if (objcss) {
    Object.assign(el.style, objcss);
  }
  if (objattr) {
    Object.keys(objattr).forEach(attr => {
      el.setAttribute(attr, objattr[attr]);
    });
  }
  if (html) {
    el.innerHTML = html;
  }
  parent.appendChild(el);
};

エレメントからHTMLのtableを作成します。

87
88
89
90
91
92
93
94
95
96
97
98
99


// kintoneのデータをtableに出力する
resrec.forEach((record, i) => {
  const trname = 'tr' + i;
  createElement(tab, 'tr', trname);
  const trElement = document.getElementById(trname);

  CYB.cols.forEach((col, j) => {
    const tdname = trname + 'td' + j;
    createElement(trElement, 'td', tdname,
      {borderWidth: 'thin', borderStyle: 'solid'},
      null, record[col].value.replace(/\r?\n/g, '<br>'));
  });
});

ボタンをクリックしたタイミングで、ライブラリを使用してtableからxlsxへ書き出します。

48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71


// xlsxファイルの作成
const makeExcelFile = () => {
  const wopts = {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary'
  };
  const workbook = {SheetNames: [], Sheets: {}};
  const nodelist = document.querySelectorAll('table.table-to-export');
  const node = Array.prototype.slice.call(nodelist, 0);

  node.forEach((currentValue, index) => {
    let n = currentValue.getAttribute('data-sheet-name');

    if (!n) {
      n = 'Sheet' + index;
    }
    workbook.SheetNames.push(n);
    workbook.Sheets[n] = XLSX.utils.table_to_sheet(currentValue, wopts);
  });

  const wbout = XLSX.write(workbook, wopts);
  saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), 'test.xlsx');
};

ライブラリの適用

固定リンクがコピーされました

また、以下のライブラリもkintoneに適用します。
ライブラリの下にoutputXLSX.jsを追加してください。

kintone REST API Client
- https://js.cybozu.com/kintone-rest-api-client/5.7.4/KintoneRestAPIClient.min.js
FileSaver
- dist/FileSaver.min.js v2.0.4を適用
- MIT License
sheetjs
- dist/xlsx.full.min.js v0.20.3を適用
- Apache License 2.0

すべて適用すると、以下のようになります。

動作確認

固定リンクがコピーされました

冒頭でお見せしたとおり、Excel出力用に作成した一覧（カスタマイズビュー）に移動し「Download XLSX」ボタンを押すと、kintoneのデータがxlsx形式でダウンロードされることを確認してください。

おわりに

固定リンクがコピーされました

今回紹介したカスタマイズで、kintoneのレコードをボタン1つで直接Excelファイルとして出力できます。
レポートの作成や他システムとの連携など、日々の業務の効率化にご活用いただければ幸いです。

このTipsは、2025年8月版kintoneで動作を確認しています。

kintone API

Excel