cybozu developer network

Enhanced by Google

カテゴリー内の他の記事

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

作成日
更新日

はじめに 

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

できること

Excel出力用の一覧でボタンを押すと、kintoneアプリ内のデータがExcelファイルに出力されます。

kintonetoexcel.png

補足

  • 出力データは文字列 (1行)、文字列 (複数行)フィールドのみに対応しています。
  • 文字列 (複数行)フィールドの改行がわかるよう、カスタマイズビューから Excel に出力しています。

事前に準備するもの

kintoneアカウント ※開発者ライセンスの取得方法はこちら

手順

  1. kintoneアプリの作成
  2. JavaScriptカスタマイズ

kintoneアプリの作成

はじめから作成

ポータル画面のアプリの「+」ボタンをクリックします。
Image_2018-08-03_12-19-08.png

「はじめから作成」をクリックします。
__________2018-08-03_12.18.38.png

フォームの設定

フォームは以下の画像を参考にして設定します。
Image_2018-08-03_14-34-04.png

以下のフィールドをフォームに配置してください。

 フィールドの種類  フィールド名  フィールドコード
レコード番号 レコード番号 レコード番号
文字列 (1行) タイトル title
文字列 (複数行) 詳細 detail

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

Excel出力用のカスタマイズビューを作成します。「一覧」タブに移動し「＋」ボタンをクリックします。
Image_2018-08-03_14-43-19.png

レコード一覧の表示形式に「カスタマイズ」を選択し、以下の画像を参考にして設定します。
Image_2018-08-15_10-57-09.png

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

「保存」ボタンをクリックし、最後に「アプリの公開」ボタンをクリックすると、アプリが作成されます。

JavaScriptカスタマイズ

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

outputXLSX.js

コード解説

  1. 一覧画面を開いたときのイベント app.record.index.show の発生時に、出力用のデータを作成しています。
  2. fetchRecords()で、kintoneのレコードを全件取得します。
  3. 取得したデータからエレメントを作成します。
  4. エレメントからHTMLのtableを作成します。
  5. ボタンをクリックしたタイミングで、ライブラリを使用してtableからxlsxへ書き出しします。

また、いくつかライブラリも使っているので、それらもkintoneに適用します。
outputXLSX.jsと併せて、PC用のJavaScriptファイルに記述してください。

Cybozu CDNのライブラリ…URLで指定します

  • jQuery
    • https://js.cybozu.com/jquery/3.6.1/jquery.min.js

Cybozu CDN外のライブラリ…GitHubからダウンロードしたファイルをアップロードして適用します

  • SheetJS js-xlsx
    • dist/xlsx.full.min.js を適用
    • Apache License 2.0
  • FileSaver
    • FileSaver.min.js v1.3.4を適用
      （FileSaver.jsのv1.3.6以降を利用する場合、ソースからビルドする必要があるため）
    • MIT License

全てアップロードすると、以下のようになります。
アプリへのJavaScript/CSSファイルのアップロードの方法はヘルプ - JavaScriptやCSSでアプリをカスタマイズするをご参照ください。

jscsscustomize.png

動作確認

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

おわりに

これまで、csv形式で出力するか、Excel側にVBAを埋め込むという方法はあったものの、直接kintoneからxlsx形式で出力する方法は公開されていませんでした。
Excelファイルが読み込めるサービスとの連携が、より敷居が低くなりますね。

デモ環境

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

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

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

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

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

Avatar
小松　知佳

excel出力機能大変参考になります。

レコードをテーブルで表示したものを、エクセル出力していますが、

レコード詳細画面(テーブル表示しない標準ページ)からexcel出力も可能でしょうか？

サンプルコードがもしあれば参考にさせて頂きたいです。

Avatar
cybozu Development team

小松 知佳様

お世話になっております。

cybozu developer network 運営チームです。

こちらのコメントは記事に対するフィードバック欄となっております。

詳しいカスタマイズ方法のご質問はコミュニティをご活用いただければ幸いです。
https://developer.cybozu.io/hc/ja/community/topics

記事内のコメント（ここ）は、記事をフォローしている方のみコメント通知されるので、あまりひと目につきません。
コミュニティは多くの方が見ておられるので、色々な方のフォローをもらいやすいです。

大変お手数をおかけいたしますが、よろしくお願いいたします。

Avatar
堀有佑

補足に「出力データは文字列(1行)、文字列 (複数行)フィールドのみに対応しています」とありますが、これはExcelファイルとして出力することが可能なのは文字列フィールドのみということで、例えば日付フィールドや数値フィールドの値を出力させることはできないのでしょうか？

 

Avatar
堀有佑

上記質問に加えて、

この記事と同じ方法で操作を行い、「Download XLSX」ボタンを押下しても、

コンソール画面に

Uncaught ReferenceError: saveAs is not defined
    at HTMLButtonElement.makeExcelFile (download.do?
    at HTMLButtonElement.dispatch (jquery.min.js:2:41772)
    at HTMLButtonElement.y.handle (jquery.min.js:2:39791)
とエラーが出て、Excelファイルの出力ができません…。

このエラーへの対処を教えていただければ幸いです。

Avatar
cybozu Development team

堀有佑 様
お世話になっております。cybozu developer network 事務局です。

補足に「出力データは文字列(1行)、文字列 (複数行)フィールドのみに対応しています」とありますが、

はい、本記事のサンプルコードで Excel ファイルとして出力できるのは、
文字列 (1行)、文字列 (複数行)フィールドのみになります。
ほかのフィールドを出力したい場合は、サンプルを修正した上でご活用いただけますと幸いです。

エラーが出て、Excelファイルの出力ができません

「Uncaught ReferenceError: saveAs is not defined」のエラーですが、
saveAs が定義されている FileSaver.min.js が環境に適用されていない場合、上記エラーは発生します。
本文の「コード解説」の通りに、ファイルがアップロードされているかをご確認いただけますでしょうか。

お手数ですが、ご確認のほどよろしくお願いいたします。

Avatar
Daichi Araki

テンプレートを参考にプログラム作成しましたが、エクセル出力がうまくいかないようです。（一覧画面にテーブルは表示できます）

以下の環境です。

  • デバイス（PC or モバイル）：PC
  • OS・ブラウザ：macOS、Chrome

コンソール画面には、
------
Uncaught ReferenceError: XLSX is not defined
    at download.do?（省略）
    at Array.forEach (<anonymous>)
    at HTMLButtonElement.makeExcelFile (download.do?（省略）
    at HTMLButtonElement.dispatch (jquery.min.js:2:41772)
    at HTMLButtonElement.y.handle (jquery.min.js:2:39791)
------
とあります。ちなみに以下の参照ファイルは正常にアップロードされていることは確認済みです。

outputXLSX.js
https://js.cybozu.com/jquery/3.3.1/jquery.min.js
xlsx.full.min.js
FileSaver.min.js

念のためカスタマイズをせずにCybozu様側で提示されているサンプルコードやアプリ設定を当環境にそのままコピーして試しても同様のエラーとなります。エラー箇所は以下の部分です。

            workbook.Sheets[n] = XLSX.utils.table_to_sheet(currentValue, wopts);

このエラーへの対処を教えていただけるでしょうか。よろしくお願いいたします。

Avatar
cybozu Development team

Daichi Araki 様

お世話になっております。cybozu developer network 運営でございます。

念の為当方でも記事通りにアプリを作成してみましたが、無事動作しました。

考えられる要因として、下記のようにJavaScriptファイルのアップロードの並びは問題ないでしょうか？
正常に動作させるためには、下記のように順序も正しくする必要がございます。

また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問が別途ございましたらcybozu developer コミュニティをご活用ください。

よろしくお願い致します。

Avatar
JUST

dist/xlsx.full.min.js　はどこにありますでしょうか？

 

Avatar
cybozu Development team

JUST 様

お世話になっております。cybozu developer network 運営でございます。

記事に下記リンクありますように、SheetJS js-xlsxをGithubからダウンロードいただくと、zipファイルがダウンロードされます。

それを解凍後、解凍されたフォルダ内にdistフォルダがありますので、その中にxlsx.full.min.jsがあります。

Cybozu CDN外のライブラリ…GitHubからダウンロードしたファイルをアップロードして適用します
 　SheetJS js-xlsx
　　dist/xlsx.full.min.js を適用

githubからのダウンロードは下記のように行なえます。

 

恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、試してみたがわからない、など
記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。

よろしくお願い致します。

 

cybozu Development teamにより編集されました
サインインしてコメントを残してください。