JavaScriptのフォームで任意のエクセルデータをとりこんで、JSONに変換する。
すごく参考になるサイトがあったのですが、コメント無しでは読むのが難しかったので備忘で残しておきます。
参考サイト
引用:[SheetJS] WebアプリでExcelをデータベースとして使う
こちらのサイトのプログラム部分を引用させていただいております。
/* * SAMPLE : FORMからXLSXファイルをリード */ var X = XLSX; // ファイル選択時のメイン処理 function handleFile(e) { // FileListオブジェクトの配列から、一つ目のFileオブジェクトを取り出す var files = e.target.files; var f = files[0]; // ファイルリード(ファイル読み込み後に実行する部分) var reader = new FileReader(); reader.onload = function (e) { // ブラウザからのファイルリード結果を変数に保存 var data = e.target.result; // バイナリデータを型つき配列(Uint8Array)に変換 var arr = fixdata(data); // Uint8Array形式のデータをワークブックデータとして読み込む(sheetjsを利用) var wb; wb = X.read(btoa(arr), { type: 'base64', cellDates: true, }); // ワークブックのデータをjsonに変換(sheetjsを利用) var output = ""; output = to_json(wb); console.log(output); $("pre#result").html(JSON.stringify(output, null, 2)); }; // FileオブジェクトをArrayBufferとしてメモリ上に読み込む。(読み込んだらonload部分を実行する) reader.readAsArrayBuffer(f); } // バイナリデータを型つき配列(Uint8Array)に変換 function fixdata(data) { var o = "", l = 0, w = 10240; for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w))); o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w))); return o; } // ワークブックのデータをjsonに変換 function to_json(workbook) { var result = {}; workbook.SheetNames.forEach(function (sheetName) { var roa = X.utils.sheet_to_json( workbook.Sheets[sheetName], { raw: true, }); if (roa.length > 0) { result[sheetName] = roa; } }); return result; } /* * DOMロード時処理 */ $(function() { // ファイル選択欄 選択イベント $('.custom-file-input').on('change', function (e) { handleFile(e); $(this).next('.custom-file-label').html($(this)[0].files[0].name); }) });
File APIについてはこちらで勉強させていただきました。わかりやすくて助かりました。
JavaScript初級者から中級者になろう|十二章第五回 File API
おわり
コメントを残す