2022-10-19 10:05:59 +00:00
|
|
|
<!DOCTYPE html>
|
2022-10-20 18:47:20 +00:00
|
|
|
<!-- sheetjs (C) 2013-present SheetJS https://sheetjs.com -->
|
2022-10-19 10:05:59 +00:00
|
|
|
<!-- vim: set ts=2: -->
|
|
|
|
|
<html lang="en" style="height: 100%">
|
2023-01-09 05:08:30 +00:00
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
|
|
<meta name="robots" content="noindex">
|
|
|
|
|
<title>SheetJS fetch Demo</title>
|
|
|
|
|
</head>
|
2022-10-19 10:05:59 +00:00
|
|
|
<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>
|
