<!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 x React17 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://docs.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>