SheetJS( https://sheetjs.com/ )は、エクセルファイルの読み書きを行うJavascriptライブラリです。ここでは、本ライブラリを使って複数のエクセルファイルを読み込むサンプルを掲載しています。
確認はchromeでしています。また、IEでは、別に残念ではありませんが動きません
スポンサーリンク
複数のエクセルファイルを一括で読み込む(SheetJS)
まずは、HTMLのサンプルです。input要素に multiple を追加することで複数のファイルを一括で取り込むことができるようになりました。また、accept属性では取り込めるファイルを制限することができます。
HTML
acceptによって、xlsx形式のエクセルのみ取り込めるようにしています。また、multipleを設定して複数ファイルを一括で取り込めるようにしています。
いまだに相手のことを考えてと(もはや何も考えていない単なる癖)、デフォルトはxls形式で保存しているおっさんがいます。しかも、偉い人です。うわっ!うちの会社の未来はないなって思えてきます。ってか、実際ないし・・・
<div> <input type="file" id="file-select" name="xlsxes[]" multiple accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" > </div> <script src="jquery-3.4.1.min.js"></script> <script src="xlsx.full.min.js"></script>
Javascript
function event_handler(evt) {
// 選択されたファイルをすべて取得
var files = evt.target.files;
// ファイル数分ループ
for(var i=0, f; f=files[i]; i++) {
// 心配ならば、f.type でエクセルがどうか判断もできる
// FileReaderを作成
var reader = new FileReader();
reader.onload = (function(targetFile) {
return function(e) {
// ファイル情報を出力
console.log(targetFile);
// エクセルファイルの内容を配列に格納
var data = new Uint8Array(e.target.result);
var arr = ''; // 変換したエクセルデータを取り込む器
/*
* String.fromCharCode.applyには一回あたりのサイズの制限値(値はブラウザごと?)がある
* 限界を超えると Maxmum call stack size exceeded が発生する
* 従ってエクセルデータの配列を小分けに与えている
*/
const SliceSize = 30000; // 1回あたりのサイズ(適当で、値に意味はない)
for(var i=0; i<data.length; i+=SliceSize) {
arr += String.fromCharCode.apply(null, data.slice(i, i+SliceSize));
}
// ワークブックを取得
var wb = XLSX.read(btoa(arr), {type: 'base64', cellDates: true});
/*
* 以降、エクセルの内容を読んだり、書いたり・・・
* エクセルの解析は完了しているので、wbの中を見ると理解が進むと思います
*/
};
})(f);
// エクセルファイルを読み込む
reader.readAsArrayBuffer(f);
}
}
$(document).ready(function () {
// ファイルが選択された時のイベントハンドラを登録
$('#file-select').on('change', function(evt) {
event_handle(evt);
})
});