ファイル入力からXLSXを読み込む
ユーザーがディスクから .xlsx ファイルを選び、それを直接グリッドに読み込めるようにします。
バニラ JS
<input type="file" accept=".xlsx" id="file" />
<div id="grid" style="width: 100%; height: 500px;"></div>import { createReogrid } from '@reogrid/lite';
const { worksheet } = createReogrid('#grid');
const input = document.querySelector<HTMLInputElement>('#file')!;
input.addEventListener('change', async (e) => {
const file = (e.target as HTMLInputElement).files?.[0];
if (!file) return;
await worksheet.loadFromFile(file);
});React
import { Reogrid, type ReogridInstance } from '@reogrid/lite/react';
import { useRef } from 'react';
export default function App() {
const gridRef = useRef<ReogridInstance>(null);
async function onFileChange(e: React.ChangeEvent<HTMLInputElement>) {
const file = e.target.files?.[0];
if (!file || !gridRef.current) return;
await gridRef.current.worksheet.loadFromFile(file);
}
return (
<>
<input type="file" accept=".xlsx" onChange={onFileChange} />
<Reogrid ref={gridRef} style={{ width: '100%', height: 500 }} />
</>
);
}Vue
<script setup lang="ts">
import { ref } from 'vue';
import { Reogrid, type ReogridInstance } from '@reogrid/lite/vue';
const gridRef = ref<{ instance: ReogridInstance | null }>();
async function onFileChange(e: Event) {
const file = (e.target as HTMLInputElement).files?.[0];
if (!file || !gridRef.value?.instance) return;
await gridRef.value.instance.worksheet.loadFromFile(file);
}
</script>
<template>
<input type="file" accept=".xlsx" @change="onFileChange" />
<Reogrid ref="gridRef" style="width: 100%; height: 500px" />
</template>その他の読み込み元
- URL から:
await worksheet.loadFromUrl('/data/report.xlsx') - 生の ArrayBuffer から:
await worksheet.loadFromBuffer(arrayBuffer) - シートを指定して:
await worksheet.loadXlsx(data, { sheetName: 'Sheet2' })
補足
- xlsx の読み込みは Lite・Pro の両方で動作します。Pro 限定なのはエクスポートのみです。
- Lite では、ファイルが 100 行または 26 列を超える場合、超過分は警告なく切り捨てられます。
loadFromFileは、セル・スタイル・結合・罫線・表示形式・画像の適用が完了した後に解決します。これを await すれば、グリッドの準備が整った状態になります。