TssGrid 例: Excel(xlsx)読込 サンプル + ExcelJS
xlsx の
読込は
ExcelJS(MIT)がパースを全部やってくれるので、CSV と違い自前パース不要。
データ(セルの値)だけ取り込みます(書式・数式は無視=
数式はその結果値を採用)。1行目を見出し、2行目以降をデータとして
setData でグリッドに反映。
下の
「サンプル生成して読込」で round-trip(生成→読込)を確認、または
実ファイルを選択して取り込めます。出力は
excel-export.html で。
差し込み(要点)
// セル値→テキスト(データのみ。数式は結果値、日付は yyyy-mm-dd)
function cellText(v){
if (v == null) return '';
if (v instanceof Date) return v.toISOString().slice(0,10);
if (typeof v === 'object') {
if (Array.isArray(v.richText)) return v.richText.map(t=>t.text).join('');
if ('result' in v) return cellText(v.result); // 数式 {formula,result}
if ('text' in v) return String(v.text); // ハイパーリンク
return '';
}
return String(v);
}
const wb = new ExcelJS.Workbook();
await wb.xlsx.load(await file.arrayBuffer()); // ← ExcelJS がパース
const ws = wb.worksheets[0], rows = [];
ws.eachRow({ includeEmpty:false }, (row) => {
const a = []; for (let c=1;c<=ws.columnCount;c++) a.push(cellText(row.getCell(c).value));
rows.push(a);
});
const headers = rows.shift(); // 1行目=見出し
new TssGrid(host, { headers, data: rows }); // ← グリッドに反映