46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import { read, utils, writeFile } from 'xlsx';
|
|
import Handsontable from 'handsontable';
|
|
import 'handsontable/dist/handsontable.css'
|
|
import './App.css';
|
|
|
|
function App() {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const [hot, setHot] = useState<Handsontable>();
|
|
|
|
useEffect(() => {
|
|
if(!ref || !ref.current) return;
|
|
const _hot = new Handsontable(ref.current, {
|
|
data: [ ["Sheet", "JS", ""], ["Hands", "on", "Table"] ],
|
|
rowHeaders: true, colHeaders: true, height: 600, width: 800
|
|
});
|
|
setHot(_hot);
|
|
return () => { if(hot && !hot.isDestroyed) hot.destroy() };
|
|
}, []);
|
|
|
|
const fetchFile = async() => {
|
|
const ab = await (await fetch("https://docs.sheetjs.com/pres.numbers")).arrayBuffer();
|
|
const wb = read(ab);
|
|
const ws = wb.Sheets[wb.SheetNames[0]];
|
|
const aoa = utils.sheet_to_json<any[]>(ws, { header: 1 });
|
|
hot.loadData(aoa);
|
|
};
|
|
|
|
const download = async() => {
|
|
if(!hot) return;
|
|
const ws = utils.aoa_to_sheet(hot.getData());
|
|
const wb = utils.book_new(ws);
|
|
writeFile(wb, "SheetJSHOT.xlsx");
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<button onClick={fetchFile}>Fetch File</button>
|
|
<button onClick={download}>Download</button>
|
|
<div ref={ref}/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default App
|