kintone上でExcelを読み込む方法の記録です。
.csvではなく.xlsx形式を読み込めるのか、が気になったので。
調べるとExcelを扱うライブラリは幾つか有るようで、
無理ではなさそうです。
使用ライブラリ
今回使用するのは SheetJS です。
GitHubのREADME.mdがめちゃくちゃ充実してます。
前提とか
kintoneには任意のファイルを保存できる「添付ファイル」フィールドがあります。
今回はこのフィールドに保存されているExcelファイルを読み込んでみます。
アプリ構成はこんな感じ↓
添付ファイルフィールドと作成／更新情報のフィールドのみ・・・。
「資料」の「世界の人口.xlsx」を読み込みます。
「世界の人口.xlsx」はこんな内容です↓
我らが日本は2010年時点で10位のようですね。
完成形
「Excelデータ取得」ボタンをクリックすると、
ブラウザコンソールに内容を表示する、というイメージです。
添付ファイルフィールドのファイルの内容が読み込めています。
シート名 > セル名（A1等） > というオブジェクトで読み込むようです。
使用したコード
復習も兼ねて、コードをざっくり振り返ります。
メイン部分
kintone.events.on("app.record.detail.show", function(e) {
if($('button-get-excel-data').length > 0) return e;
$(kintone.app.record.getHeaderMenuSpaceElement()).append(
'<button id="button-get-excel-data">Excelデータ取得</button>'
);
});
$(document).off('click', '#button-get-excel-data');
$(document).on('click', '#button-get-excel-data', function(ev) {
getAttachedFile().then(function(blob){
return convertBlobToBase64(blob);
}).then(function(base64) {
const _base64 = base64.split(',')[1];
const workbook = XLSX.read(_base64, {type:"base64"});
});
});
メインとなるレコード表示イベント、Excelの内容読み込み部分の抜粋です。
添付ファイルダウンロード～データ形式変換
$(document).on('click', '#button-get-excel-data', function(ev) {
getAttachedFile().then(function(blob){
return convertBlobToBase64(blob);
}).then(function(base64) {
getAttachedFile()で添付ファイルをダウンロードし、
convertBlobToBase64()でblob ⇒ base64 に変換しています。
Excel操作が本質なのでここでは割愛しますが、添付ファイルのダウンロードや、blob／base64の変換は
後述の参考から確認できます。
base64に変換した内容を読み込み
}).then(function(base64) {
const _base64 = base64.split(',')[1];
const workbook = XLSX.read(_base64, {type:"base64"});
});
base64に変換したデータを読み込んでいます。
base64に変換後は、
data:application/octet-stream;base64,データ内容...
になるわけですが、XLSX.read()に渡すのはカンマ以降のデータ内容なので、
splitで分割してカンマ以降を渡しています。
（丸ごと渡していて上手く読み込めずに地味につまった。。。）
まとめ
どうしても.xlsx形式で管理したくて、読み込みたいセルがわかっている場合は
今回の手法は有効と思いました。
ただ、あまりそういうケースはなさそう。。。
参考
参考にさせていただいた記事です、ありがとうございます！
[SheetJS] WebアプリでExcelをデータベースとして使う
