docs.sheetjs.com/docz/static/react/fetch.html
2023-01-09 00:08:30 -05:00

44 lines
1.5 KiB
HTML

<!DOCTYPE html>
<!-- sheetjs (C) 2013-present SheetJS https://sheetjs.com -->
<!-- vim: set ts=2: -->
<html lang="en" style="height: 100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex">
<title>SheetJS fetch Demo</title>
</head>
<body>
<style>TABLE { border-collapse: collapse; } TD { border: 1px solid; }</style>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<div id="root"></div>
<script type="text/babel">
function Titel(props) { return ( <h3>{props.name}</h3> ); }
function Tabeller(props) {
/* the workbook object is the state */
const [workbook, setWorkbook] = React.useState(XLSX.utils.book_new());
React.useEffect(() => { (async() => {
/* fetch and parse workbook -- see the fetch example for details */
const wb = XLSX.read(await (await fetch("https://sheetjs.com/pres.numbers")).arrayBuffer());
setWorkbook(wb);
})(); });
return workbook.SheetNames.map((name, idx) => ( <div key={idx}>
<Titel name={name} />
<div dangerouslySetInnerHTML={{
/* this __html mantra is needed to set the inner HTML */
__html: XLSX.utils.sheet_to_html(workbook.Sheets[name])
}} />
</div>));
}
ReactDOM.render( <Tabeller/> , root );
</script>
</body>
</html>